This is the 12th day of my participation in Gwen Challenge

Vuepress+GithubPages to build personal blog (knowledge notebook) (a), [efficiency tool] Node+Koa- implement mock data interface & mock.js scheme (b)-, – this article introduces to build personal static blog tool Hugo

Only for reference, according to the need to eat, inadequate, welcome all the big bosses give advice, supplement and improve, welcome to share

  • To do a good job, he must sharpen his tools. Practice promotes the development of science and technology
  • As a siege lion, doing things is also a way to learn, such as setting up their own personal blog, recording daily, recording learning, but also to show themselves to everyone
  • This article will be shared with youhugo + githubBuild your own personal blog to help you increase your knowledge and improve your competitiveness

usehugoCreate a Personal blog

Hugo is a static web site generator implemented by the Go language. Simple, easy to use, efficient, easy to expand, rapid deployment.

[documentation] : Hugo Chinese document

【 theme 】

Gihub /gohugoio/ Hugo

Hugo is based on the GO language, which is simpler and error-resistant compared with Hexo. Hexo requires a number of dependencies to be installed.

Installed a.hugo

  1. OS : brew install hugo

  2. Win: download Hugo https://github.com/gohugoio/hugo/releases to download a 32/64

Environment variables need to be configured for the Hugo version window command. (You can also view the version by opening the command line in the installation path)

Configure environment variables: System > Advanced System Settings > Environment Variables > System Variables > New: Variable names do not conflict with the line such as HUGO, variable value is the PATH of HUGO. Exe folder (no need to write HUGO. % The name of the variable you just wrote %, as in:; %HUGO%, notice the semicolon before and after;

2. To create

  1. Command: Hugo new site < project name >

  2. It was so fast, you wouldn’t believe it

Theme 3.

  1. Hugo Theme library https://themes.gohugo.io

    This (fake) blog uses the theme: Hugo-Tranquilpeak-theme

  2. Under the project directory, download the theme:

    git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

4. Start

  1. Command:
# -t specifies the theme: m10c
hugo server -t m10c --buildDrafts
# Web Server is available at http://localhost:1313
Copy the code

Write a blog

  1. New Blog (.md) command:
Run the command in the project directory in content/post/first-blog.md
hugo new post/first-blog.md
Copy the code

Deploy to Github

  1. Packaging commands with themes:

    First package, generate public
# --themes= hugoe-tranquilpeak-theme Specifies the theme --baseUrl=" Deploy address "--buildDrafts build
hugo --theme=hugo-tranquilpeak-theme --baseUrl="https://xn213.github.io/hugo_blog"

Git push to Github
git init
git add .
git commit -m 'First submission of blog created by Hugo'
# Local associate remote
git remote add origin https://github.com/xn213/hugo_blog.git
git push -u origin master
Copy the code

The road to filling holes

  1. Path problem after local image is referenced in.md:

    : image path 】 【 content/post/img/test. The JPG

    [Picture use] :! [test.jpg](/post/img/test.jpg)

    Hugo new post/first-blog.md Create path is content/post/first-blog.md

    BaseUrl =’ protocol domain/project name /’ create post/img/test.jpg in the root directory

    Therefore, request domain name/project name /post/img/test.jpg after deployment

    Such as: https://xn213.github.io/hugo-blog/post/img/test.jpg

  2. Static resource path problem after packaging:

  • Image path:

  1. Themes \ Hugo -tranquilpeak-theme\static\images should be placed under the background of thumbnail articles/article contents

  2. \static\images images are packaged into the images folder at the root of the package file: \public\images

  3. \content\post\img => \public\post\img

  4. One-click Deployment (SSH must be configured with Git)

Git commit:

Sh Code for deploying the command file
# test automatic deployment
Make sure that errors encountered by the script stop
set -e

# Pack blog
hugo --theme=hugo-tranquilpeak-theme --baseUrl="https://xn213.github.io/hugo_blog"

cd public

git add .

# :sunny::four_leaf_clover::love_letter::heart_eyes::revolving_hearts:
git commit -m 'Updated: Have a little wine.. : Revolving_hearts: & musicUrl Lost & Test Audios Controls'

git push
Copy the code

You can also use Github Actions to help automate deployments, as recommended in the previous section

Of course, there are many useful tools for building blogs. Here are some of them for reference only.

You can find and use your favorite theme, you can also customize your own theme, there is no get it?

Welcome to comment on your private tools and share your blog with everyone =, =

Today’s preview will be updated tomorrow:

Hexo + Github Pages will be updated tomorrow…

Set up your own community of bloggers to keep track of secrets, learn, and compete for the next Hexo post! hahah~~