Recently I decided to build a personal blog site and compare hexo with hugo Hugo Static Page Generation Engine with theme tranquilpeak , using the comment system Valine .The purpose of this article is to record in detail the process of creating a personal blog.
Dead work
- Git, Golang environment
- GitHub Account or Gitee Account (Blog with free pages service)
- Wordpress Account (provide personal picture)
- LeanCloud Accounts (Manage Review Data)
Installing Git, golang, creating GitHub, gitee accounts is skipped
Install Hugo
This blog installs using Windows. For other systems, see Hugo Official website.
- Download the latest version directly from GitHub zip Package and add to environment variables.
- Or use choco to download choco install hugo from the command line
After successful installation, type hugo version on the command line to display the following image, indicating that the installation was successful.
Hugo Static Site Generator v0.55.6-A5D4C82D windows/amd64 BuildDate: 2019-05-18T07:57:00Z
Create and configure site blogs
- Create a blog
hugo new site myblog -
download hugo-tranquilpeak-theme theme
cd myblog/themes git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak -
Modify config.toml configuration file
Copy config.toml to myblog under the themes/tranquilpeak/exampleSite folder to overwrite the original config.toml.
View tranquilpeak theme in GitHub Configuration Items
Here is the configuration file for this blogbaseURL = "https://your_name.github.io/your_name/" # Tips: must be configured, otherwise uploaded blogs cannot find css files on GitHub Pages and do not generate styles languageCode = "en-us" defaultContentLanguage = "zh-cn" # Tips: Configure Chinese title = "KXMing" # Tips: Blog Name theme = "tranquilpeak" # Tips:Configure Theme disqusShortname = "valine" # Tips: Comment System paginate = 10 # Tips: Number of articles displayed per page canonifyurls = true publishDir = "docs" # Tips: Generate a static blog to the docs folder, deploy the blog source and publish the blog at once when deployed on GitHub Pages [permalinks] post = "/:year/:month/:slug/" [taxonomies] tag = "tags" category = "categories" archive = "archives" # Tips: Defined blog categories and logical relationships [author] name = "your_name" # Tips: Blog Sidebar Name bio = "Front End Development" # Tips: Personal introduction to the sidebar of the blog job = "Front-end" # Tips: Blog Sidebar Occupation location = "Shenzhen" # Tips: Blog profile page address gravatarEmail = "964579219@qq.com" # Tips: Personal blog avatar, taken from WordPress Avatar # Tips: Defined Sidebar Menu, icon from Font-awesome [[menu.main]] weight = 1 identifier = "home page" name = "home page" pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>" url = "/" ... [[menu.links]] ... [[menu.misc]] [params] dateFormat = "2006 January 2, 2001" # Tips: Default date format syntaxHighlighter = "highlight.js" # Tips: Syntax Highlighting js Library clearReading = true # Tips: Enter the sidebar menu of the article content page to close hierarchicalCategories = true sidebarBehavior = 2 # Tips: Define sidebar status (values 1-6, self-test display status) coverImage = "cover.jpg" imageGallery = true # Tips: Show photo walls at the bottom of content thumbnailImage = true # Tips: Does the list page display content pictures thumbnailImagePosition = "bottom" # Tips: List page shows content pictures at the bottom autoThumbnailImage = true favicon = "/favicon.ico" # Tips: Browser tab Icon displayed on this site, placed under the static folder [params.header.rightLink] class = "" icon = "" url = "/#about" # Tips: Whether to show the right-hand side of the page header with personal avatar clicks # Add Valine comment system parameters here [params.valine] enable = true appId = 'your appid' appKey = 'your appkey' notify = false avatar = 'mm' placeholder = 'Say something...' visitor = true -
Create your first blog
hugo new post/first_blog.md
Settings at the top of the file, refer to the rest of the configuration tranquilpeaktitle: "Name of this blog" date: 2019-05-26T17:44:53+08:00 categories: - Parent Class
tags:
- Label
keywords:
- Keyword
The content above the more tab will show the content introduction on the list page
<!--more-->
The toc tag generates a table of contents for this article
<!-- toc -->
`hugo serve` Access local services on browser localhost:1313 port 5. Install Valine Review System > Valine - a fast, simple and efficient no-back-end commenting system. Installation Tutorial Reference [smslit](https://www.smslit.top/2018/07/08/hugo-valine/) blog. Modify Theme File Open the themes/layouts/partials/post file and replace the original content with the valine comment code 6. Deploy GitHub Pages or Gitee Pages Create a new project in GitHub, upload the project code, open settings/options, select GitHub Pages Source as master branch/docs folder, wait for deployment, and view the blog you created at https://your_name.github.io/your_folder_name after success. Create a new project in the code cloud, upload the project code or import the GitHub project, open the service/Gitee Pages, fill out the docs in the deployment directory, wait for deployment, and view the blog created at https://your_name.gitee.io after success. >This blog is simple to configure. More blog topics and comments can be viewed on their respective websites. Q & A 1. There are two ways to introduce pictures -The picture address is set to the file under the baseUrl+static folder in config.toml, for example: Picture path is static/vue/test.png The address is https://your_name.github.io/your_name/vue/test.png. -Graph Bed Take the GitHub plot bed as an example. -Create a new repository on github such as picbed - git clone -Put the pictures you need to upload under the local directory picbed - git commit git push -Picture link format is: `https://raw.githubusercontent.com/<github number>/<repository name>/master/<picture name>`, for example: https://raw.githubusercontent.com/841809077/blog-img/master/win-github.jpg Or you can use [PicGo](https://picgo.github.io/PicGo-Doc/zh/guide/)