一、背景介绍
博主之前使用Hexo 搭建博客,用了三年,这个工具最大的缺点就是,每次更新blog后,项目运行跟打包的速度有点慢,直到近期在冲浪的时候发现了Hugo,号称最快的静态站点生成器。使用之后发现确实,更快,果断迁移!
博主在第一次创建博客的时候还是一名学生,当时经济上不能满足我为搭建博客购买服务器、域名等,之后发现Github账户可以给自己开一个静态网站(可通过username.github.io访问)–Git Pages 。静态网站有一些功能上的限制,如不能运行php、不能自动读写站内文件……但是考虑到自己搭建博客的目的主要是记录学习、记录技术等,静态网站可以满足个人需求,主要还是因为免费,所以选择了它。但是有个缺点是访问速度慢或者无法访问,因为Github的服务器在国外,所以国内访问会受到限制。直到看到了Vercel之后找到了代替git pages的方案,下面会介绍这个网站的。
二、开始搭建
2.1 创建网站Github仓库
Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world.
Github 顾名思义全球最大的同性交友(击剑)网站全球最大代码托管平台,每个程序员都应该有听过或者正在使用。我们可以将自己的网站代码托管在上面。
2.1.1 注册Github账号
访问Github,点击右上角 Sign Up
进行注册,注册成功后,Sign in
进入个人主页
2.1.2 新建仓库
点击右上角 +
–> 点击 New Repository
注意此处,仓库命名为 ”username.github.io
" 例如 你的账户名为lincx
那么此处设置为 lincx.github.io
点击 Create Repository
即创建成功
2.1.3 本地安装git
本地下载 Git ,Win10直接下载 exe ,点击下一步就好了
(已安装的可以直接跳过)
更多关于git 学习,可以看git学习
2.2 Hugo
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易拓展、快速部署。
2.2.1 安装hugo
从hugo的GitHub 仓库下载即可,可根据个人电脑类型选择适合的安装包,博主选择的是 hugo_0.89.4_Windows-64bit.zip,下载完成,解压,将hugo的路径添加到环境变量PATH即可。(针对win10)打开命令行,输入hugo version
,显示版本号即为安装成功。
2.2.2 初始化网站
在适合的位置 (推荐D盘)输入 hugo new site blogname
,其中 blogname
可以根据自己喜好修改
> hugo new site blogname
Congratulations! Your new Hugo site is created in E:\blog\hugo\blogname.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
根据提示信息:
- 下载配置主题
- 添加blog文章内容
- 在本机启动hugo自带的服务器进行调试
点击进入blogname文件夹可以看到文件构成
├─archetypes
├─content
├─data
├─layouts
├─resources
├─static
├─themes
├─.hugo_build.lock
└─config.toml
config.toml
是网站的配置文件,hugo 同时还支持 YAML 格式的 config.yaml 或 JSON 格式的 config.json。content 目录放 markdown 文章,data 目录放数据,layouts 目录放网站模板文件,static 目录放图片、css、js 等静态资源,themes 命令放下载的主题
2.2.3 下载主题
hugo默认不自带主题,但是又需要主题才能正常工作,所以我们可以到 主题网站,选择心仪的主题,下载到themes目录中。
下面以code主题为例:
首先点击到主题里边,点击 Download
之后就会跳转到对应的GitHub仓库
在readme 处通常会有安装教程,可以根据这个教程来完成
也可以直接将它拉取到本地,复制地址
在本地项目blogname
的themes目录中,右击打开 Git Bash here
,运行 git clone git@github.com:luizdepra/hugo-coder.git hugo-coder
命令,即可下载成功
$ git clone git@github.com:luizdepra/hugo-coder.git hugo-coder
Cloning into 'hugo-coder'...
remote: Enumerating objects: 2649, done.
remote: Counting objects: 100% (267/267), done.
remote: Compressing objects: 100% (155/155), done.
remote: Total 2649 (delta 92), reused 190 (delta 52), pack-reused 2382
Receiving objects: 100% (2649/2649), 3.05 MiB | 1.70 MiB/s, done.
Resolving deltas: 100% (1320/1320), done.
接着,将 hugo-coder\exampleSite\config.toml
这个配置文件复制代替blogname
根目录的config.toml
最后在项目blogname
根目录打开命令行,下面是一个快速打开命令行的方式,在文件路径栏中输入 cmd
按回车 Enter
即可打开
运行 hugo server -D
看到下面的提示,算成功了。
E:\blog\hugo\blogname>hugo server -D
port 1313 already in use, attempting to use an available port
Start building sites …
hugo v0.89.4-AB01BA6E windows/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio
| EN | PT-BR
-------------------+----+--------
Pages | 11 | 11
Paginator pages | 0 | 0
Non-page files | 0 | 0
Static files | 5 | 5
Processed images | 0 | 0
Aliases | 1 | 0
Sitemaps | 2 | 1
Cleaned | 0 | 0
Built in 114 ms
Watching for changes in E:\blog\hugo\blogname\{archetypes,content,data,layouts,static,themes}
Watching for config changes in E:\blog\hugo\blogname\config.toml, E:\blog\hugo\blogname\themes\hugo-coder\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
打开 浏览器 访问 http://localhost:1313/ 可以看到blog主页
2.2.4 添加内容
在项目目录中执行 hugo new XX.md
命令,会在 content 目录中创建这个 XX.md 文件。
hugo new about.md
这个文件的默认内容为:
---
title: "About"
date: 2021-12-03T15:05:35+08:00
draft: true
---
draft
表示是否是草稿,编辑完成后请将其改为 false,否则编译会跳过草稿文件。具体内容写在其下面:
---
title: "About"
date: 2021-12-03T15:05:35+08:00
draft: true
---
# 关于作者
一名在校计算机专业学生,技术主要集中在后端开发,同时也有接触过前端、小程序开发,平时喜欢接触一些新鲜玩意儿
目前技术栈:
+ Golang、Java、JavaScript
+ Vue.js、Spring、Spring Boot、Gin
+ Mysql、Redis、Etcd
+ 云原生、分布式
希望通过这个blog记录自己学习心得等,有问题欢迎联系哦!
再次运行 hugo server -D
,在浏览器点开blog主页的About能看到内容
一般blog文章内容放在 content/posts
这个目录中,所以写文章可以运行 hugo new posts/xxxx.md
新建内容文件,然后编写内容
+++
draft = true
date = 2021-12-03T15:23:01+08:00
title = "First Blog"
description = "xxxx"
slug = ""
authors = ["lincx"]
tags = []
categories = []
externalLink = ""
series = []
+++
# First Blog
这是我的第一篇blog 希望能在接下来的日子里,在这里分享自己学习心路历程
重新运行 hugo server -D
,在浏览器点开blog主页的Blog能看到内容
2.2.5 更改配置
blog项目的配置主要是根目录下的 config.toml
文件
baseURL = "http://www.example.com"
title = "johndoe"
theme = "hugo-coder"
languageCode = "en"
defaultContentLanguage = "en"
paginate = 20
pygmentsStyle = "bw"
pygmentsCodeFences = true
pygmentsCodeFencesGuessSyntax = true
enableEmoji = true
# Enable Disqus comments
# disqusShortname = "yourdiscussshortname"
[params]
author = "John Doe"
description = "John Doe's personal website"
keywords = "blog,developer,personal"
info = ["Full Stack DevOps", "Magician"]
avatarURL = "images/avatar.jpg"
#gravatar = "john.doe@example.com"
dateFormat = "January 2, 2006"
since = 2019
# Git Commit in Footer, uncomment the line below to enable it
commit = "https://github.com/luizdepra/hugo-coder/tree/"
# Right To Left, shift content direction for languagues such as Arabic
rtl = false
# Specify light/dark colorscheme
# Supported values:
# "auto" (use preference set by browser)
# "dark" (dark background, light foreground)
# "light" (light background, dark foreground) (default)
colorScheme = "auto"
# Hide the toggle button, along with the associated vertical divider
hideColorSchemeToggle = false
# Series see also post count
maxSeeAlsoItems = 5
# Custom CSS
customCSS = []
# Custom SCSS, file path is relative to Hugo's asset folder (default: {your project root}/assets)
customSCSS = []
# Custom JS
customJS = []
# If you want to use fathom(https://usefathom.com) for analytics, add this section
# [params.fathomAnalytics]
# siteID = "ABCDE"
# serverURL = "analytics.example.com" # Default value is cdn.usefathom.com, overwrite this if you are self-hosting
# If you want to use plausible(https://plausible.io) for analytics, add this section
# [params.plausibleAnalytics]
# domain = "example.com"
# serverURL = "analytics.example.com" # Default value is plausible.io, overwrite this if you are self-hosting or using a custom domain
# If you want to use goatcounter(https://goatcounter.com) for analytics, add this section
# [params.goatCounter]
# code = "code"
# If you want to use Cloudflare Web Analytics(https://cloudflare.com) for analytics, add this section
# [params.cloudflare]
# token = "token"
# If you want to use Matomo(https://matomo.org) for analytics, add this section
# [params.matomo]
# siteID = "ABCDE" # Default value is "1", overwrite this if you are cloud-hosting
# serverURL = "analytics.example.com" # For cloud-hosting, use provided URL, e.g. example.matomo.cloud
# If you want to use Google Tag Manager(https://analytics.google.com/) for analytics, add this section
# [params.googleTagManager]
# id = "gid"
# If you want to implement a Content-Security-Policy, add this section
[params.csp]
childsrc = ["'self'"]
fontsrc = ["'self'", "https://fonts.gstatic.com", "https://cdn.jsdelivr.net/"]
formaction = ["'self'"]
framesrc = ["'self'"]
imgsrc = ["'self'"]
objectsrc = ["'none'"]
stylesrc = [
"'self'",
"'unsafe-inline'",
"https://fonts.googleapis.com/",
"https://cdn.jsdelivr.net/"
]
scriptsrc = ["'self'", "'unsafe-inline'", "https://www.google-analytics.com"]
prefetchsrc = ["'self'"]
# connect-src directive – defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource
connectsrc = ["'self'", "https://www.google-analytics.com"]
[taxonomies]
category = "categories"
series = "series"
tag = "tags"
author = "authors"
[[params.social]]
name = "Github"
icon = "fa fa-2x fa-github"
weight = 1
url = "https://github.com/johndoe/"
[[params.social]]
name = "Gitlab"
icon = "fa fa-2x fa-gitlab"
weight = 2
url = "https://gitlab.com/johndoe/"
[[params.social]]
name = "Twitter"
icon = "fa fa-2x fa-twitter"
weight = 3
url = "https://twitter.com/johndoe/"
[[params.social]]
name = "LinkedIn"
icon = "fa fa-2x fa-linkedin"
weight = 4
url = "https://www.linkedin.com/in/johndoe/"
[[params.social]]
name = "Medium"
icon = "fa fa-2x fa-medium"
weight = 5
url = "https://medium.com/@johndoe"
[[params.social]]
name = "RSS"
icon = "fa fa-2x fa-rss"
weight = 6
url = "https://myhugosite.com/index.xml"
rel = "alternate"
type = "application/rss+xml"
[languages.en]
languageName = "🇬🇧"
[[languages.en.menu.main]]
name = "About"
weight = 1
url = "about/"
[[languages.en.menu.main]]
name = "Blog"
weight = 2
url = "posts/"
[[languages.en.menu.main]]
name = "Projects"
weight = 3
url = "projects/"
[[languages.en.menu.main]]
name = "Contact me"
weight = 5
url = "contact/"
[languages.pt-br]
languageName = "🇧🇷"
title = "João Ninguém"
[languages.pt-br.params]
author = "João Ninguém"
info = "Full Stack DevOps e Mágico"
description = "Sítio pessoal de João Ninguém"
keywords = "blog,desenvolvedor,pessoal"
[[languages.pt-br.menu.main]]
name = "Sobre"
weight = 1
url = "about/"
[[languages.pt-br.menu.main]]
name = "Blog"
weight = 2
url = "posts/"
[[languages.pt-br.menu.main]]
name = "Projetos"
weight = 3
url = "projects/"
[[languages.pt-br.menu.main]]
name = "Contato"
weight = 5
url = "contact/"
✨😈一定要修改baseURL
:
需要改成 2.1.2步 创建的仓库 ,找到Settings
->Options
->Repository name
将 bashURL
“=” 后面的内容换成 “https://xxxx.github.io/”xxxx 为你的用户名,例如我的 “https://lincx-911.github.io/”
如果不修改 baseURL
的话push到远程仓库,会找不到文件
🤡修改头像的话 avatarURL
:
可以在项目根目录下的 static\images
文件夹(没有的话自己创建)添加自己的照片,将 avatarURL
后面的内容修改为 “images\xxxx.png”
其他的可以根据自己的需求进行修改
2.2.6 上传到GitHub
在项目根目录 blogname
打开命令行,输入 hugo
,回车,如果一切顺利,所有静态页面都会生成到 public
目录,将pubilc目录里所有文件 push
到刚创建的Repository的
PS E:\blog\hugo\blogname> hugo
Start building sites …
hugo v0.89.4-AB01BA6E windows/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio
| EN | PT-BR
-------------------+----+--------
Pages | 11 | 11
Paginator pages | 0 | 0
Non-page files | 0 | 0
Static files | 10 | 10
Processed images | 0 | 0
Aliases | 1 | 0
Sitemaps | 2 | 1
Cleaned | 0 | 0
Total in 936 ms
进入 public 文件夹,依次输入下面命令就行,注意 xxxx
要换成你的github username
$ cd public
$ git init
$ git remote add origin https://github.com/xxxxx/xxxxx.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
浏览器里访问:http://xxxxxx.github.io/
会看到你的blog主页了。以后,每次新增文章或者修改配置,都需要重新走一遍上面2.2.6 的步骤,只不过不需要 git init
跟git remote
两个步骤,这两个只需要在第一次push的时候执行就行
2.2.7 报错
1、点看主页后发现 “This XML file does not appear to have any”。解决:点开GitHub仓库
Settings -> Pages -> Change theme
随便选一个主题就行。然后重新访问就能正常了。
2.3 Vercel
vercel 是目前我用过的最好用的网站托管服务
2.3.1 注册账号
访问主页,点击右上角 Sign Up
注册账号
通过Git
仓库账号关联注册,如果注册中出现错误,检查下账号是不是QQ
邮箱。
Vercel
不支持QQ
邮箱,以GitHub
为例,可以修改GitHub
的默认邮箱。
GitHub -> Settings -> Emails -> Primary email address
2.3.2 创建project
点击 New Project
输入前面创建的GitHub仓库的地址
在线安装vercel
GitHub -> Settings -> Applications -> Vercel -> Configure
选择项目 ,选择项目框架
点击 Deploy
部署项目
点击 DOMAINS
下面的xxxxx-vercel-app
就能访问你的主页了
2.3.3 设置域名
Vercel -> Project-> Settings -> Domains
生效后会自动签发SSL
证书,开启HTTPS