Contents

How to build this blog

Hugo is a static website generator like Hexo and Jekyll, but Hugo is written in Go language, which is faster, more modern and easier and simpler to use.

Hugo offers many themes, since I was thinking of showing my resume, I found a more comfortable theme “LoveIt”.

I made some changes to the theme to make it meet my requirements.

Requirement

Thanks to the convenient of Github and Netlify, it’s easy to deploy your own blog.

  • Github will not mention much, this time to build the site is in fact the LoveIt template clone to the local, change the relevant configuration, and release the updates to the GitHub repository, so that Netlify automatically deployed on it.

  • Netlify offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites.

  • If you want a unique and cool name like “https://umiotter.com” to guide your audiences, a domain is required. Here is a website which provide a lightning-fast availability checker and domain price list FYI: https://www.domcomp.com.

Step 1. Create Your Project

Create a empty repository in github.

/How_to_build_this_blog/New_Repo.png
Create a repository.

Type your favor respository name and description, I set this repository to private and without add the README file and license, this is not a necessary operation.

/How_to_build_this_blog/New_Repo_profile.png
Add the profile of repository.

Clone the repository to the local.

1
2
## replace the {YourGithubID} and {RepositoryName} with your own setting
git clone https://github.com/{YourGithubID}/{RepositoryName}.git

Step 2. Installation

2.1 Install and initialize the Hugo

Install Hugo in MacOS:

1
brew install hugo

Hugo provides a new command to create a new website:

1
2
hugo new site {YourWebSiteName}
cd {YourWebSiteName}

2.2 Install the theme

The LoveIt theme’s repository is: https://github.com/dillonzq/LoveIt. I recommend to fork the repository to your github for further customized.

1
2
cd ./themes
git submodule add https://github.com/{YourGithubID}/LoveIt.git

The hugo.toml file in root folder include the set of hugo and LoveIt theme, you can modify it according to your favor.

The complete sample configuration can be found at 3.1 Site Configuration section in “https://hugoloveit.com/theme-documentation-basics/".

In the main page, I want to add a entry “About me” to link to my resume. However, the subtitle property in LoveIt theme don’t support hyperlink.

To achieve this, I added following code in /theme/loveit/layouts/home/profile.html

1
2
3
4
5
    {{- with $profile.aboutme -}}
    <h3 class="home-disclaimer">
        <a href="{{- . -}}" style="text-decoration:underline;"><em>About me</em></a>
    </h3>
    {{- end -}}

A new property param.home.aboutme is defined to set the hyperlink corresponding to my resume page.

1
2
3
4
5
6
## in `hugo.toml` file
  [params.home]
      ...
      # link `about me` field to resume page
      aboutme = "/about"
      ...

Step 3. Deploy your website on netlify

In Netlify main page, click Team overview -> Add new site-> Import an existing project.

/How_to_build_this_blog/netlify_new_site.png
Create a repository.

Select the repo that you just created in GitHub and deploy your project directly in next page.

/How_to_build_this_blog/select_repo.png
Select Repository.

Create a new file which named netlify.toml in root folder and add following setting:

1
2
3
4
5
6
[build]
  publish = "public"
  command = "hugo --gc --minify"

[build.environment]
  HUGO_VERSION = "0.115.0"

Now here is way to create your first post:

1
hugo new posts/first_post.md

After you finished the writing, you can preview you content by using the following command:

1
hugo serve -D

Go to http://localhost:1313 to check your site.

Build you website by using the following command.

1
hugo

Netlify will automaticaly update and publish after your commit and sync your local repo.

1
2
3
git add -A
git commit -m "Update my first post."
git push

To speed up the deployment process, I wrote a shortcut script deploy_n.sh that integrates all the commands:

1
2
3
4
git add -A
git commit -m "網站更新"
git push
echo -e "\e[93mDeployed to Netlify.\e[0m"

This way, as soon as I finish writing a new article, I can simply run the ./deploy_n.sh command in the root directory to complete the operation of pushing the website code to Github. The netlify automatically pull the compiled static HTML from /public in repo and publish.