directory

1. The original
2. Static page generator
   1. Installation and Creation
   2. configuration
3. Static page hosting — Github
4. summary

I’ve wanted to start a personal technology blog for a while, but I finally got it done using github Pages. It’s humble but it’s got a place to stay. We met a lot of problems when we opened the land. Let’s record it as a souvenir.

The original

The purpose of setting up a personal technology blog is twofold:

• Knowledge organization. At work or in leisure, there are always various problems and technical points of interest. As the saying goes, good memory is better than bad writing, timely summary helps review. We must have encountered such a situation: a problem is very clear in my mind, but when I speak out, I find it is not thorough enough and there are omissions. This is the Feynman method of learning: you need to force learning by writing and lecturing.
• Meet friends with skill. Music alone is not as good as music, communication and discussion can grow faster. The more people who see it, the more people will comment on it, which will not only help them find their own mistakes, but also help more people avoid detours.

In order to achieve the above goals, I did some research and found the following ways:

• Wechat official account. Easy to spread, high quality content requirements, but also can be profitable.
• Ready-made blogging platforms. Familiar with: CSDN, Jianshu, Blog Park; In recent years: Nuggets, SegmentFault; Knowledge platform in the form of question and answer: Zhihu, etc. Their benefits are:
  • The system is mature. Whether editing, query, search, interaction, revenue, everything.
  • Search engine friendly. It’s almost done to perfection, which means you can get out of the box and reach more people.
• Build your own. The biggest benefit is personal branding, but the trade-off is that you start from scratch: servers, domain names, archiving, databases, backend processes, and so on. Of course, there are also many cloud service providers to provide supporting solutions, such as: Ali, Tencent, Netlify and so on. This is probably the hardest path to take, but it’s the one that many tech gurus take.
• Based on existing static page hosting platforms. The classic example isgithub, domain name and server, just content.

After evaluation, the final decision to start from the static page, the mind focused on the content, such as real accumulation and then slowly to promote outside. So that leaves two questions:

1. Select a static page generation tool
2. Choose a page hosting platform

Static page generator

SSG(Static Site Generator) for short: let the author focus on the content and convert the common text written in Markup language into rich and colorful Web pages. This demand can be said to hit the pain point of the majority of technical nerds, you look at the existing mature solutions up to 400+. The top 10 SSGS of 2019, plus hexo, have completed the list of outstanding candidates. In the end, I chose Hugo for a simple reason:

• Based on thegoDevelopment, a binary on the line, no intricate dependencies.
• The community is active. This is important, because the more people you use it, the more solutions you get.
• Fully functional. There are a variety of front-end language support, such as org-mode, which I’m used to, and it has built-in support. The overall framework is flexible and easy to understand, such as document classification, multi-language, theme, built-in ShortCode support more powerful expression, etc. Modify instant preview; One-click deployment.

With all that said, let’s get straight to the picture, and here’s what we want: some plain text, looking at a Web page

This article is written on Emacs using org-mode. All content comes from this file. The resulting Web page is:

Quick start

Installation and Creation

The installation

brew install hugo
Copy the code

Create a new site, root directory: bug Fly

Hugo New site bug flyCopy the code

git submodule add ttps://github.com/zzossig/hugo-theme-zzo.git themes/zzo
Copy the code

cp -rf themes/zzo/exampleSite/config .
cp -rf themes/zzo/exampleSite/content .
cp -rf themes/zzo/exampleSite/static .
Copy the code

baseURL = "https://carbonshow.github.io"
title = "Fly the Bug."
theme = "zzo"
defaultContentLanguage = "zh"
Copy the code

[zh]
title = "Bugs Fly base Camp."
languageName = "Chinese"
languageDir = "ltr"
contentDir = "content/zh"
weight = 1

[en]
title = "Bugs Fly base Camp."
languageName = "English"
languageDir = "ltr"
contentDir = "content/en"
weight = 2
Copy the code

[[main]]
identifier = "about"
name = "About"
url = "about"
weight = 1

[[main]]
identifier = "posts"
name = "Adventure Notes"
url = "posts"
weight = 2
Copy the code

hugo server -D
Copy the code

Static page hosting — Github

Use Github Pages to host and display the generated static Pages, which take effect immediately after submission. It is ideal for Git users. Pages come in two types:

• User oriented and organizational oriented
• Concrete engineering oriented

Blog is a platform with rich content that may not be targeted at a specific project, so choose the former. The basic process is as follows.

Create your own account on Github

Github’s official website can be registered directly. The following will take my account Carbonshow as an example to introduce.

Create the first repository on Github

Used to save Hugo projects, such as mylog

After creation, clone to the local and build Hugo project as described above.

git clone https://github.com/carbonshow/myblog.git
Copy the code

When finished, it might look something like this:

Create a second repository on Github

IO, for example, carbonshow.github. IO

Step 4: Add static pages as submodules tohugoIn the project

Go to the myblog directory locally and add carbonshow.github. IO as a submoudle to the public subdirectory to save the generated pages.

git submodule add -b master https://github.com/carbonshow/carbonshow.github.io.git public
Copy the code

Step 5: Generate and submit the page

Running Hugo in the myblog directory will generate pages in the public directory. Enter the directory to commit and push to the remote repository.

The build and commit process can be simplified to a bash script that executes the following code in the deploy.sh file.

#! /bin/sh
# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
  msg="$*"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master
Copy the code

Step 6: landedcarbonshow.github.io

A rich interface is displayed:

summary

Above introduced the basic process, the core or content creation. I hope you all have a good build, and then have fun coding words.

In addition, careful friends may find that the interface content of SSG is rich and beautiful, which is inseparable from the powerful personalized theme design and configuration function provided by Hugo. After writing in Markdown, people sometimes need to provide more diverse displays and have to use HTML. Hugo’s ShortCodes can encapsulate some complex redundant code into simple interfaces, using the zzO theme as an example to show an info-level special reminder:

## Alert

Colored box

{{< alert theme="warning" >}}
**this** is a text
{{< /alert >}}

{{< alert theme="info" >}}
**this** is a text
{{< /alert >}}

{{< alert theme="success" >}}
**this** is a text
{{< /alert >}}

{{< alert theme="danger" >}}
**this** is a text
{{< /alert >}}
Copy the code

Shortcodes are similar to THE style of HTML, but all command words are contained in {{< >}}. Hugo has built in the basic interface, and different themes have their own encapsulation, and various forms of expression, waiting for you to explore.

Finally, I recommend a website for icon production: www.favicon-generator.org/, a picture can be converted into a suitable picture for different platforms, you can try oh.