This is the 13th day of my participation in the Gwen Challenge.More article challenges

Travis CI is a continuous integration tool that automatically pulls code from GitHub and then performs testing, building, and deployment. The goal of this article is to use Travis CI to automatically deploy static blogs based on Hugo to GitHub Pages.

Static blog based on Hugo

Hugo is one of the most popular open source static site generators.

Install Hugo

Installing Hugo on Linux is the easiest, as you just need to download and unzip it to use:

The curl - LO, https://github.com/gohugoio/hugo/releases/download/v0.83.1/hugo_0.83.1_Linux-64bit.tar.gz sudo tar - C/usr /local/ bin - ZXF hugo_0. 83.1 _Linux - 64 - bit. Tar. GzCopy the code

Creating a new site

Creating a new site requires a single command, such as fastcicd.com:

hugo new site fastcicd.com
Copy the code

Use the theme

Hugo has many themes, many of which are open source and we can choose our own, for example here we use the LoveIt theme:

cd fastcicd.com
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
Copy the code

Then modify the site configuration file config.toml, as follows:

baseURL = "https://fastcicd.com/"
# [en, zh-cn, fr, ...]  determines default content language
defaultContentLanguage = "en"
# language code
languageCode = "en"
title = "My New Hugo Site"

# Change the default theme to be use when building the site with Hugo
theme = "LoveIt"

[params]
  # LoveIt theme version
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false
Copy the code

New articles

New article is also a line of command done:

hugo new posts/first_post.md
Copy the code

Local boot

To run it locally, use the following command (the content of the new article above cannot be empty or it will fail to run) :

hugo serve
Copy the code

Travis CI is automatically deployed

Making code warehouse

First, we need to create a new repository on GitHub, such as k8SCAT/fastcicd.com.

Travis CI configuration

After creating the repository, we don’t need to push the code. We need to add a.travis. Yml file to the root directory of the project, which looks like this:

dist: xenial # Use Ubuntu Xenial

before_install:
  - sudo apt-get update
  - sudo apt-get -y install curl

Hugo # installation
install:
  - curl -LO https://github.com/gohugoio/hugo/releases/download/v0.83.1/hugo_0.83.1_Linux-64bit.tar.gz
  - sudo tar -C /usr/local/bin -zxf Hugo_0. 83.1 _Linux - 64 - bit. Tar. Gz

Update the theme and generate a static blog
script:
  - git submodule update --init --recursive
  - git submodule update --remote --merge
  - hugo --buildDrafts --gc --verbose --minify

# Deploy to GitHub Pages
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master GitHub Pages is deployed only on the master branch
  local_dir: public Generate a directory of static blogs
  target_branch: pages Deploy a branch of GitHub Pages
Copy the code

Adding environment variables

When deploying to GitHub Pages, we need to use GitHub Personal AccessToken. This sensitive configuration should not be written in plain text in the configuration file, so we use the $GITHUB_TOKEN environment variable. Environment variables need to be configured in a code store specified by the Travis CI:

Automatic deployment

Finally, we can automatically deploy static blogs to GitHub Pages by pushing the code to the GitHub repository:

git add .
git commit -m "init"
git push origin master
Copy the code

The project address

k8scat/fastcicd.com