Yuya Hochi: A Blog Website
This is a blog website created with React, Gatsby and Contentful. Visit my blog website by clicking Here
Motivation
Before creating this project, I was familiar with CommonJS but never experienced building an application that can be used in the real world. Therefore, I decided to make a blog website where I can show my skills.
Another motivation is to publish clear explanations of technology such as programming. Throughout my self-study, I spent hours trying to understand one concept. I hope that the articles I have published help others to understand without going to other sources.
Purpose
There are multiple purposes for this project. Here is a list of purposes:
- Learn how to use Gatsby
- Learn how to manage files
- Learn Website design
- Learn Search Engine Optimization (SEO)
- Apply all the things above to the project
- Improve my react skill
How I managed files
As the number of files increases, it is becoming more difficult to manage files. File management comes in handy for this situation. For this project, I organised files by categorizing folders by what they do. For example, the Layout folder contains files that compose the basic structure of the website: header and footer. This allows me to find the file they are looking for easily.
What I paid attention to my design
Maintaining consistency is key in terms of web design. In this website, four colours are used to make the website consistent. In addition, using the same layout for an entire website enables viewers to easily navigate to any page.
What I have done for SEO
Crawlers such as google crawler search for millions of websites and rank them according to their contents, metadata, and cleanness of their codes. For content, I followed the basic rules such as including h1 text one time on a single page.
To include metadata for each page, react-helmet is used for this website. Title, description, and keyword (and an image for articles) are added to the head of HTML. Adding an image to the head is important as it appears when someone shares an article on social media such as LinkedIn. In addition, I can edit the title, description, and even image from contentful so that I do not need to modify the codes.
As a result, according to the lighthouse, I have achieved a 100 score for SEO.
Further Improvements
- Design of the website
In a module that I am taking called “Human-Computer Interaction”, I was taught that designing a website before actually coding is a standard process. As a lo-fi prototype can be modified and I can reflect some changes quickly, creating a Lo-fi prototype is one thing that I should do in the next development or next update of this website. - Comments
Although I did create this website by myself, it is always a great practice to have a comment above methods, etc. In this way, I can know what a method does in a short time rather than spending time looking at codes and thinking about what it does.