How to use HUGO to build a personal blog

Warning: This page is translated by MACHINE, which may lead to POOR QUALITY or INCORRECT INFORMATION, please read with CAUTION!

Foreword

In recent days, I just joined the internship. One is to adjust the schedule, the other is to adapt to the work, and the third is that there are some courses related content that needs to be learned and handled. It is not allowed to be idle. Today’s work schedule is finally adjusted. , Busy to write blogs.

The reason for writing this topic is also very simple. I just built the blog two days ago. I will share some experiences and step on the pit. Similarly, many people have already written similar topics, and I will directly post the link and post the link. Come out instead of repeating mechanically. I will organize the knowledge I use to share.

Reference link

What is hugo?

Static page generator

In fact, if you want to build a personal blog, it is enough to look at the link above. But I still briefly introduce the necessary steps here. Hugo is a static page generator. It can generate beautifully generate a beautiful Static page. The advantage of static pages is that the deployment is relatively convenient, the response speed is fast, and the disadvantages are obvious. You cannot edit the page in real time. You must edit the local -generate page -deployed to the server (of course), and it is difficult to be difficult Integrate the functions of some traditional front and back dynamic pages; but even so, static pages, or HUGO is enough for individuals.

HUGO’s installation and use

This part is very simple, just do it directly on the official websiteQuick Start | Hugo (Gohugo.io)The official website has given the key steps for downloading HUGO, setting themes, publishing posts, etc. It is given a very simple tutorial.

Pit 1: If you use it on the Windows platformwinget install Hugo.Hugo.ExtendedIf the download hugo cannot be opened/used normally, you need to go to the hugo installation directory to copy hugo.exe into your blog folder and run Hugo -related instructions in the form of a relative path, such as./hugo.exe server -D, This can run normally

HUGO theme selection and installation

You can arriveComplete List | Hugo themes (Gohugo.io)Browse your favorite theme. When you want to use a theme, you can click DEMO of the details page to view the online example (some themes do not have DEMO). Github warehouse, which is detailed about this theme); then you can use itgit clone links position orgit submodule add links positonThe theme is cloned to your blog directory; the general theme folder has an ExampleSite subfolder, you can use this folder for rapid deployment (pay attention to preserve your previous configuration file). If you think your theme runs If you are different from the example of the theme official website, it is probably your problem. At this time, you should check your directory name, file name, file head information, etc. at this time.

Hugo’s stack theme

use`Github Action`Automatically publish blog

Before talking about automatic release, of course, let’s talk about how to deploy the website.

Deploy a website on the server

First, usehugo --minifyGenerate web static files (the generated directory is PUBLIC), which willpublicCopy the content in the directory to your server (pay attention to the file permissions); then configure the following configurationnginxAgent (here is configuredhttpsIf there is no certificate, you can configure ithttp.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
server {
        listen 443;
        server_name aprilme.love;
        # 证书
        ssl_certificate "/yourPath/aprilme.love.pem";
        # 私钥
        ssl_certificate_key "/yourPath/aprilme.love.key";
        location / {
        	# 此处是你刚刚复制到的目录
                root /yourpath/blog;
                   }
        }

In this way, you can type your domain name in the browser to visit your blog.

You can also forward the flow of port 80 to port 443 through the following configuration (that is, to puthttpFlow to forward tohttps), Pay attentionaprilme.loveReplace it with your own domain name.

1
2
3
4
5
server {
        listen 80;
        server_name aprilme.love;
        rewrite ^(.*)$ https://${server_name}$1;
                }

If you do not have a certificate, you can get a signature certificate (but the browser will indicate that it is not safe because it is signed by your own, not the signature of an authoritative agency); you can also buy a certificate, but the current cloud server provider will send some free to some free to send some for free Certificate, just go to apply for download directly. For example, Alibaba Cloud’s server can refer to2022 Alibaba Cloud Free SSL Certificate Application (Detailed Explanation of Graphic) -Eriyun Developer Community (Aliyun.com)Then, then

Configuration`Github Action`

Have you found that the above deployment process is not difficult, but whenever your blog content is updated, you need to copy the file to copy it, which is very trouble After that, it will be released automatically, and we don’t need to manually publish it? Of course there are, that is, use itGithub ActionThen, then

`Github Action`What is

GitHub ActionsIt is an automated workflow tool provided by the GitHub platform to automatically perform various operations in the code warehouse. It can help developers automate the common software development task by configure and define a series of events triggered by an event in the warehouse. For example, constructing, testing, deployment and notifications.

GitHub ActionsAllows developers to define the workflow by writing some simple YAML files. These workflows can be automatically triggered when specific events (such as code push, merger request creation, label release, etc.). Actions), each step can perform some specific operations, such as running commands, building code, running tests, pushing to other code warehouses, sending notifications, etc.

GitHub ActionsA rich integration and ecosystem can be provided, which can integrated with many other development tools and services, such as Docker, AWS, Azure, Google Cloud, Slack, Jira, etc., so as to achieve more complex automation workflows.

GitHub ActionsIt can help developers improve development efficiency, automated repetitive tasks, ensure the quality of code, and promote teamwork. It is a powerful feature of the Github platform, which is widely used in open source projects and commercial projects.

`Github Action`Configuration file

Create in your project directory.github/workflowsFolder, created under the foldermy_blog_deploy.yamlFiles, file content is as follows

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
name: Deploy Hugo Project to Aliyun ECS

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'

    - name: Build Hugo Site
      run: hugo --minify

    - name: Deploy Site to Aliyun ECS
      uses: easingthemes/ssh-deploy@v2
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        TARGET: /yourpath/blog
      with:
        source: public/

The following is the explanation of the configuration file:

name: Specify the name of the workflow, here is named"Deploy Hugo Project to Aliyun ECS"Then, then
on: Specify events that trigger the workflow, here is the configuration to push to"main" Trigger the workflow during branching.
jobs: Define one or more jobs. Here"deploy" work.
runs-on: Specify the operating system environment of work operation. The configuration here is configured as"ubuntu-latest"It means running in the latest Ubuntu environment.
steps: A series of steps to define work.

name: Specify the name of each step to identify the role of the step.
uses: Specify the use of ACTION, here use multiple different ACTION to perform different tasks, such as use"actions/checkout@v2" Action detects code, use"peaceiris/actions-hugo@v2" Action installation and configuration hugo, use"easingthemes/ssh-deploy@v2" Action deployed the website to Alibaba Cloud ECS.
with: The ACTION used to pass the parameter to the use, here use different parameters to configure the HUGO version, set the host of the deployment target, user and path.
run: Run commands in the current working environment, use it here"hugo –minify" Commands to build a HUGO website and compress the output.
env: Set up environmental variables. Here is an environmental variable for private keys and remote hosts, users, and target paths for SSH connection. These values are obtained from GitHub Secrets.

The purpose of this configuration file is to push to each time"main" During the branch, automatically build the HUGO website and deploy the generated website files to the designated directory specified on Alibaba Cloud ECS. This can achieve continuous integration and automatic deployment, improve development efficiency, and ensure that the latest version of the website is available on Alibaba Cloud ECS.

Above${{ secrets.REMOTE_HOST }}It is an encrypted environment variable in the GitHub warehouse, which is used to store sensitive information, such as the API key, private key, password, etc.

Open the github warehouse and click on the upper right corner of the warehouse page"Settings"Then, then
Warehouse"Settings" In the page, select the left menu in the left menu"Secrets"Then, then
Clicked"New repository secret" The button creates a new Secrets.
Enter the name and value of the Secrets, and then click on"Add secret" The button is saved.
In the work flow configuration file of GitHub Actions, you can use it through${{ secrets.SECRET_NAME }} The grammar is quoted to the value of the Secrets

In the previous configuration file, you can pass${{ secrets.SSH_PRIVATE_KEY }}As well as${{ secrets.REMOTE_HOST }}As well as${{ secrets.REMOTE_USER }} To get the value of the corresponding secrets so that these sensitive information can be passed to the corresponding GitHub Actions to perform operations such as deployment.

After the above configuration, whenever you put the code push to the warehouse, it will beGithub ActionExecute the content in the configuration file provided, and then pass throughSSHConnecting to your server, it costs about 30s; this will greatly simplify the manual operation and reduce the complexity.Github ActionI can do many other things, and the functions are very powerful!

Integrated review system

The importance of a blog’s comment system is not as important as its content. Of course, choosing a comment system you like. Here are some common comment systems

What I currently choose is cusdis, the reason is

Open source and self -hosting: CUSDIS is an open source review system. You can host on your own server and have complete data control, not depending on third -party services. This means that you can protect users’ privacy and have autonomous autonomy The ability to manage and modify the review system.
Lightweight: CUSDIS’s SDK is only 5KB (after GZIP compression). Compared with other comment systems such as Disqus (24KB GZIP compression), it is very lightweight and will not bring much burden on the loading speed of the website It helps improve website performance.
Do not require commentators to log in: CUSDIS does not require commentators to log in. Reviewers can anonymous comments, and do not use any cookies. This helps reduce user login and registration thresholds and increase user participation.
Easy to use: CUSDIS provides a simple embedded comment tool that can be easily embedded in any page of the website, easy to use.
Email notification: CUSDIS supports mail notification functions, allowing website administrators to receive new comments notifications in time, facilitate management and recovery comments.

Regarding the official website of the deployment of CUSDIS and many blogs, I have written very clearly. I mainly talk about CUSDIS’s cross -domain issues here.

Solve the cross -domain problem of CUSDIS

When the page references the Embed Code of Cusdis, it is easy to occurCross -domainThe problem cannot load the JS script or comment data.

1
2
3
4
5
6
7
8
<div id="cusdis_thread"
  data-host="https://yourhost"
  data-app-id="yourid"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://yourhost/js/cusdis.es.js"></script>

At this time, you need to add a response head to nginx

add_header 'Access-Control-Allow-Origin' 'yourhost';

This solves the problem that cannot be loaded, but there is a problem when loading the comment data: the response header of the comment data is added two to two'Access-Control-Allow-Origin' 'yourhost'As a result, the data loading failed.

The reason is that it will be used before loading the review dataOptionsFor HTTP request, the Nginx agent in the later GET request added another layer to the GET request'Access-Control-Allow-Origin' 'yourhost'In the end, there is a problem of repeated cross -domain permits. Write the configuration of nginx into the following form to perfectly solve the cross -domain problem. Note that for security considerations, if your website uses HTTPS, then CUSDIS must also use HTTPS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
server {
        listen 443;
        ssl_certificate "your cert.pem";
        ssl_certificate_key "your cert.key";
        server_name yourhost;
        location / {
        proxy_pass http://127.0.0.1:3000;
        if ($uri !~* .*comments.*) {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,x-timezone-offset';}
        }}

SEO, search engine optimization

Many articles have introduced how to optimize the search engine optimization steps on Google, Bing, and Baidu. I won’t talk about this part. Let me talk about the relevant knowledge of search engine optimization.

What is the index of search engine

The index of search engine refers to the records of the Internet and content preserved by the search engine in its database. The search engine is on the Internet on the Internet by capturing (or referred to as crawling, spiders, and capturing), and stores it on the Internet and stores it on the Internet. In their own database, so that users can quickly find related web pages when searching.

The index of search engine usually contains a large amount of web information, including the URL, title, text, links, pictures, videos, etc. Store and manage web information.

When the user enters keywords in the search engine for search, the search engine will match the keywords from their own index database and return the results related to the related webpage. Sex has an important impact, so search engine companies will continuously improve their algorithms and technologies to provide a better search experience.

It should be noted that not all web pages are indeed by search engines. Search engines may selectively index web pages based on their capture and index strategies, and sort and display according to factors such as the quality, authority, and update frequency of the webpage. Therefore, the website administrator can improve the opportunity to be indexed and ranked by search engine index and ranking through a series of search engine optimization (SEO) measures.

What is SEO

Seo (Search Engine Optimization) is the search engine optimization. It is a method of optimizing the content, structure and technology of the website to enhance the website’s ranking in search engines, thereby increasing the visibility and traffic of the website on the search results page. The SEO optimization aims to enable the website to get higher organic (non -paid) search rankings in search engines, so as to get more targeted traffic.

SEO optimization usually includes the following aspects:

Keyword research: By studying the keywords used by users in search engines, select the appropriate keywords and apply it to the content of the website, so that the website gets a higher ranking in search with keywords.
Website content optimization: Optimize the content of the website, including title, description, text, etc., making it more quality, valuable, related, and meet the specifications and requirements of search engines.
Website structure optimization: Optimize the structure and layout of the website to make it more user -friendly, easy to navigate and understand, and ensure that search engines can effectively grasp and index website content.
Website technology optimization: Optimized website technology, including the loading speed of the website, responsive design, URL structure, page label, etc., to improve the user experience of the website and the crawling effect of search engines.
External link construction: Through the construction of external links, increase the link weight and popularity of the website, thereby increasing the authority and credibility of the website in the search engine.
Social media optimization: By optimizing on social media platforms, including sharing website content, interaction and participation in social media communities, etc., increase the exposure and popularity of the website.
Monitoring and analysis: regular monitoring and analysis of the SEO effect of the website, understand the ranking and traffic of the website in the search engine, and adjust and optimize according to the data.

The goal of SEO optimization is to improve the ranking of the website in the search engine to make it easier to find when users search for related keywords, thereby increasing the organic flow of the website and increasing the brand’s brand visibility and business conversion rate. SEO is a long -term and complex work that needs to be continuously optimized and continuous efforts. At the same time, it also needs to follow the specifications and requirements of search engines to ensure that the website can continue to get a good ranking in the search engine.

What is sitemap.xml

sitemap.xml It is an XML file for website, which contains the structured information of the website to notify the page and content of the page and content of the search engine website. It is a technology for search engine optimization (SEO) to help search engines Better understanding and indexing website content.

sitemap.xml The file usually contains the URL address of all pages of the website, as well as information such as the importance of these pages, the frequency of update, and the final update time. The search engine can be read by readingsitemap.xml Files to understand the structure and content of the website, so as to intelligently grasp and index on the page of the website.

sitemap.xml For SEO optimization of the website, there are several functions:

Improve the index effect of the website: by submittingsitemap.xml The file is given to the search engine to help the search engine understand the content of the website more comprehensive, so as to better index and display the page of the website.
Accelerate the indexing speed of the new page: When the website releases a new page, by adding the URL of the new page tositemap.xml In the file, and submitting to the search engine, you can speed up the speed of the new page by the search engine index.
Control the frequency of search engines: By passingsitemap.xml Set the update frequency of the page and the final update time in the file, which can prompt the update of the search engine prompt page to help search engines intelligently grasp the page of the website more intelligently.
Improve the user experience of the website: through usesitemap.xml Files can help search engines better understand the structure and content of the website, thereby enhancing users to find and access the website page experience in search engines.

Using UMAMI self -built flow analysis tool

The Google Analytics used earlier is loaded slowly in China, and it is easy to cause data loss. It will use user data to generate Google’s user portraits. So I chose to chooseUmamiAs a substitute, deployment in the local area, it is more fast and light and safe.

UMAMI introduction

Umami It is a simple and easy -to -use open source website access traffic statistics analysis tool. UMAMI does not use cookies, does not track users, and all collected data will be processed anonymously, which is in line with the GDPR policy. The resources are very low. The analysis of the data is rich in content, the basic source of the country, the source domain name, the browser, system, equipment used, and the webpages access to the interviews. It also supports multi -language, which can be used to replace Google Analytics, Cloudflare Web Analytics, CNZZ, and 51LA and other statistical tools, and it can also be built by yourself to avoid being removed by the block to make the statistical data more accurate (Later, it was found that some of the advertising plug -in will be intercepted …)).[Quote from Umami self -built website traffic statistics analysis tool -ATPX]

How to deploy UMAMI

becauseUMAMI official documentationIt’s broken, so please move to itOpen source warehouseCheck the deployment document, and the operation is still very fast. Here I will talk about the problems that are easy to encounter.

First when the cloned github warehousegit clone https://github.com/umami-software/umami.gitIt is easy to have a network problem. At this time, you can download the warehouse first and then decompress it to the designated directory of the server. You can also copy the github warehouse to the gitee, then clone your gitee warehouse.Synchronous warehouseSo you can directly change the link to the Gitee warehouseaddress, Save a lot of trouble. The command at this time is

1
git clone https://gitee.com/873098424/umami.git

Then continue to follow the tutorial.yarn buildBefore, use your database nowCREATE DATABASE IF NOT EXISTS umami; Create a UMAMI database and change the library name of the configuration file to umami (the same as the database you created). ThenDon’t use the SQL statement it provided to create a table, because the table will automatically create after you startThen, then

After that, execute build and execute Start (if the start failure is caused by port occupation, you can use ityarn start --port=3001Come to modify the port). Even if the service starts up. Regarding how to configure nginx, log in, modify the password, etc., you can refer to this blogUse UMAMI self -built website traffic statistics analysis tool -ATPXThen, then

At this point, UMAMI should be able to use it normally, if the console prompts the errorFailed to load resource: net::ERR_BLOCKED_BY_CLIENTThen, it should be intercepted by advertising interceptors such as AdBlock. You can turn off your advertising interceptor to solve it, but there is no good way to avoid the intercepting of the advertising interceptor, so the data may not be so accurate.

Summarize

After reading the above content, I believe you are familiar with the basic process of building your own blog;Understanding is important, and practice is just as importantIn the middle of the process of building a personal blog, due to the different environment, the theme of the selection, and personal experience, the problems encountered must be different. The most important thing in this process ispatience, Willing to spend time to try to solve the problems encountered, grow up in learning, and learn in growth. Just like the cover of this article, Monet’s water lilies symbolize tranquility and patience. I also wish all want to build all want to build. Students who want to achieve their goals, although it is impossible to be smooth, as long as they have enough patience and ability to discover and solve the problem, as long as they have enough patience and ability. Help the outside world,If you have to get it, you will have something.