Setup blog
Contents
If you are interested to start your own blog then this article is for you. You will learn how to bootstrap a new static site with Hugo and deploy to Netlify free hosting plan.
There are several out of the box solutions on the market like WordPress, Medium, etc. However, if you would like to have more control over your blog you might consider to write it from scratch or use static site generators.
Writing a blog from scratch could be a tough job. Let’s take a look at the static site generators. This is a comprehensive list of popular platforms with high community support:
Link | Tech Stack |
---|---|
jekyll | Ruby |
gatsby | JS / React |
hexo | NodeJS |
hugo | Go |
After some research, I decided to go with Hugo. Hugo is the fastest site generator since it is written on Go. You wouldn’t spend to much time while regenerate or experiment with your blog.
Install Hugo command line interface
Since my main platform is OSX I use Homebrew package manager:
|
|
- For other platforms see Install Hugo
Create a blog application
|
|
Setup theme
Quite a lot of themes can be found on the official Hugo Themes.
I choose Hugo Themes.
|
|
- If you don’t have yarn you can always use
brew install yarn
to install it.
Configuration
Each theme has unique features and parameters set.
To use even
theme you will need to configure ./config.toml
file.
To do it copy example ./themes/even/exampleSite/config.toml
to ./config.toml
:
|
|
Now you can explore and configure different settings for even
theme.
Sometimes themes can be outdated or have some issues.
However, it shouldn’t take much effort to remedy it.
Create a new blog post
|
|
This command creates a draft blog post in markdown format.
Create a new statig page
|
|
Start server locally
|
|
Now you can open the site in your browser via http://localhost:1313/.
Deploy to Netlify
We’ll deploy our blog to free Netlify account. Netlify can deploy Hugo sites from GitHub, GitLab and Bitbucket repositories. Follow the plan:
- Create a git repository for blog application and push your site to selected repository service
- Add
/.gitignore
to the repository with the following exceptions:
|
|
- Add
./netlify.toml
to your repository with Netfly CI/CD instructions:
|
|
- Create free Netlify account
- Create a new site from Git on Netlify
Netlify generates random subdomain for your website. You can change it to custom one. Or you can register your own domain with a domain registry. And point DNS to Netlify site.
That’s it. Enjoy your blog and keep creating!
Thank you for reading!