How to create your blog for free in 10min
August 1, 2022 · 653 words · 4 min
This article is the first in a series on how to build a free independent blog, and will also teach you how to quickly use the features of GitHub Pages to build your blog.
It will help you build and deploy a blog site quickly. For more on hugo-ladder, we recommend following this article to build how to create your blog for free by hugo ladder theme in 30min。
Create GitHub Account
Before building our blog site, we need to register a GitHub account. The account username is very important, which is the domain address of our blog site.
For example, if we create an account with the username guangzhengli, we will get our blog site which address is https://guangzhengli.github.io.
Create repository for GitHub Pages
You can find the full tutorial in the GitHub Pages Doc. It just need create a new repository with the repository name
You can clone the repository, which is ready for build and deploy hugo-ladder-exampleSite.
git clone https://github.com/guangzhengli/hugo-ladder-exampleSite.git
After pulling the repository code, we need to modify the configuration, which in the
config.yml file at the root directory, we need to change all default configs to our custom configs.
modify configration file
config.yml file in the root directory with an editor and change the configuration as follows:
baseURL: 'https://hugo-ladder.pages.dev' # set https://username.github.io homepage: 'https://hugo-ladder.pages.dev' # set https://username.github.io defaultContentLanguage: 'en' #default language params: brand: HOME # set the brand of your site avatarURL: /images/avatar.png # avatar, replace your avatar in the /static/images/ author: Hugo Ladder # name authorDescription: # description info: this is a info # information of your blog site favicon: /images/avatar.png # blog site icon，replace your avatar in the /static/images/ options: showDarkMode: true # is show dark mode button enableMultiLang: true # is show multi language button
Annotate comment-related functions
The repository hugo-ladder-exampleSite just for quickly start. Suppose we all use the same comment configurations. In that case, it will bring some trouble to the subsequent visitor use, so annotating comment-related functions will be better.
change the configuration as follows:
comments: giscus: enable: true
comments: giscus: enable: false
How to create or update posts
You can find the ExampleSite demo article in the
content/blog at the root directory. You can create a new
markdown file to add a new article.
Currently in the article header, these tags need to be added to configure the display of the article:
title: article title
date: published date
tags: tags for articles to search or show
series: series of articles, it will be show related article in the bottom of article
false, article will be show in the featured posts in home page if set true.
And you may add the summary divider where you want to split the article.
push your code to username.github.io
In the first step, we create a repository named
username.github.io, so you can use the following command to remove the remote URL of the repository hugo-ladder-exampleSite, and then add your
username.github.io address to git configuration. replace
username with your account username in the following command.
Finally, you can push your change to the remote repository.
git remote remove origin git remote add origin https://github.com/username/username.github.io.git git add . git commit -m "feat: init blog site" git push origin main
Deploy GitHub Pages
Once we’ve made sure our push is successful, it will automatically build the code in the
Actions. So you can go to this address to check if
workflow is running successfully. replace
Actions runs successfully, we will have a new branch called
gh-pages. We go to the repository’s settings center
Pages, and then
Build and deployment ->
Source and selects
Deploy from a branch. After that
gh-pages to configure successfully.
Visit site above or manually enter
https://username.github.io for successful access! 🎉🎉🎉🎉
If you have any questions when deploying, you can leave a comment below.