Originally publishedISLAND

I’ve always been asked, “Blogger, how do you build your blog? Can you make a tutorial?”

Each time I would tell him the key technology to use, logically speaking, the technology to build a blog there should be a lot of articles on the web. But I still plan to write my own tutorial, convenient for more people to learn and build the use of the blog.

Hugo

At present, my blog has been migrated from Hexo to Hugo, and Hugo feels much easier to install, configure and deploy than Hexo. Hugo’s installation only requires an installation package. Find your version on Github and install it.

Hugo is written in Go and renders HTML from Markdown very quickly. It claims to be the world’s fastest web rendering framework. In addition, Hugo also has many themes for us to choose.

The installation

Remember to add Hugo to the environment variable after installation. Verify whether the installation is correct by using Hugo Version in the terminal.

Yes, installation is as simple as that. There are other installation methods available, and you can choose the official one.

site

With Hugo’s command we can quickly generate our website. You can choose your favorite place to execute the following command.

hugo new website your_website_name
Copy the code

This creates a new site.

Our new site cannot start at this time. Need to install theme, you can choose your favorite theme in you.

Here I randomly searched for a theme to install.

cd themes
git clone https://github.com/vividvilla/ezhil.git
Copy the code

After the installation is complete, configure the theme in the root directory config.toml and enter the theme name.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ezhil"
Copy the code

Start the project using Hugo Server in the root directory.

At this point our website has been launched, you can see our page.

New articles

We’ll do Hugo new posts/ hello. md and we’ll put the agreed posts in the posts directory. The posts directory will send letters to the Content directory.

Edit Hello. Md.

---
title: "Hello"
date: 2019-10-12T22:15:50+08:00
draft: true
---
# Hello HugoThis is Hugo's first article.Copy the code

There are draft options. When Draft is true, rendering is not done by default. We can change draft to false, or add the Hugo Server -d parameter when rendering starts to render.

So we’ve installed Hugo. For more information on themes, see Themes /${name}/exampleSite/config.toml.

Generating static pages

Using the Hugo command directly in the project root directory generates the public directory for our markdown compiled HTML static pages.

The deployment of

The blog has been installed and tested locally, and the article has been written. Then it’s time to deploy.

Where to deploy?

I used to like putting it in Git Page, but I found a better place on Firebase. Firebase has Hosting, which provides free data and space usage every month. For individuals, it is enough to use, and can configure personal domain name, version control, etc.

Using Firebase is a bit of a threshold, and the Continental No-ti method (ZI) is used directly.

Set up the Firebase project

First go to Firebase, log in to your account and create a new project.

Firebase CLI installation

First, make sure you have the Node.js environment locally. Set the terminal proxy.

set http_proxy=http://127.0.0.1:1080

set https_proxy=http://127.0.0.1:1080

set http_proxy_user=user
set http_proxy_pass=pass

set https_proxy_user=user
set https_proxy_pass=pass
Copy the code

Once the agent is set up, we can install our CLI.

NPM install -g Firebase-tools to complete the installation.

After the installation is complete, log in first. Firebase login For login, the browser is opened for authorization. This procedure uses a global proxy, otherwise it might not be validated.

Execute Firebase init in the root directory of your project. Select Hosting and confirm by checking the space.

Then Use an existing project. Find the project we just created from the project list. Press enter to continue. The next step is to ask whether to use a public directory. I’m just going to hit enter here. Because the public directory is the file we’re going to deploy.

If you want to rewrite index.html, you can choose not to.

Our project is now installed and created.

With the creation completed, the next step is deployment.

Deploy to Firebase

To deploy our compiled web page to Firebase, run the firebase deploy command.

After the execution is completed, the address of the project console and the project address will be told below. We can open the project address to view the project.

However, when we open the project, there is no style. You can see from the browser console that the style file has not been requested.

We need to set it up manually here.

Open the config.toml file of the project and modify the baseURL in the first line. Change it to the website address given by firebase.

Rerun Hugo and Firebase deploy. After refreshing the page, you can see that our site has been styled and redeployed to Firebase.

Integrated CI/CD

In other words, it’s a lot of work and error-prone to have a list of commands every time you finish writing. So we can integrate CI/CD for deployment.

Here I chose the CI/CD feature that comes with Gitlab. Convenient and quick.

Run the firebase login:ci command to authorize re-login. After the authorization is complete, a token line is displayed on the terminal.

Please keep your token well.

Create a CI/CD executable file in the project root directory named.gitlab-ci.yml. Paste the code below.

image: nohitme/hugo-firebase
before_script:
  - hugo version
  - firebase --version
hugo_firebase:
  stage: deploy
  only:
    - master
  except:
    - dev
  script:
    - rm -rf public
    - hugo
    - firebase deploy --token ${FIREBASE_TOKEN}
Copy the code

Upload the project to GitLab. Open project Settings and go to the CI/CD directory. Fill in FIREBASE_TOKEN in place of Key, fill in the Token we just wrote down in Valeu, and save.

When this is done, select the CI/CD directory and click Run Pipeline to rerun.

After the run completes, the project is automatically deployed to Firebase.

From then on, we only need to write articles, compile and deploy all submitted to the GitLab server.

conclusion

The basic Hugo tutorial on how to build a website and how to deploy it has been completed. The Settings are different for different topics, such as comments, reading statistics, etc. These can be carried out by referring to the instructions in your chosen topic.

May you have a blog of your own.

The public,

Individual public number code curious station