我的博客从最开始的LNMP+WordPress
到Jekyll+GitHubPages
,现在试试Hugo+Nginx
。网上的教程大都是用 Hugo 部署到 GithubPages,其实 Jekyll 跟 Hugo 的区别并不大。
我从 GithubPages 换到 vps 是因为 GithubPages 对大陆的访问并不友好,我正好有一台 HK 的 vps;而且 GithubPages 的内容是禁止百度爬取的,除非套 cdn,但 cdn 的 ip 不固定还是会影响百度的收录。
如果你想折腾 vps 的话,建议等到 11 月再入手,双 11、双 12、黑五、网络星期一 vps 厂商都会搞活动,放出一些传家宝配置,到时候留意一些 vps 测评网站的信息即可。
下面介绍 Nginx+Hugo
我的搭建环境
-
本地: macOS
-
服务器: CentOS 7.6
本地安装 Hugo 并搭建网站
可以参考官网的指引:https://gohugo.io/getting-started/quick-start/
安装 Hugo
1
brew install hugo
可能会出现 brew 升级,大概需要 5 分钟,不想升级的 ctrl+c 取消掉就行了。验证 Hugo 是否安装成功可以查一下 Hugo 版本。
1
hugo version
创建网站
先选择存放网站的路径后执行以下命令,把devwl.com
换成你都网站名或自己喜欢的名字即可。
1
hugo new site devwl.com
进入创建好的网站目录
1
cd devwl.com
此时的目录结构应该是这样的
1
2
3
4
5
6
7
8
.
├── archetypes # 内容类型,在创建新内容时自动生成内容的配置
├── content # 网站内容,Markdown 文件
├── data
├── layouts # 网站模版,选择主题后会将主题中的 layouts 文件夹中的内容复制到此文件夹中
├── static # 包含 CSS、JavaScript、Fonts、media 等,决定网站的外观。选择主题后会将主题中的 ststic 文件夹中的内容复制到此文件夹中
├── themes # 存放主题文件
└── config.toml # 网站的配置文件
然后可以找个主题,我的博客的主题用的是LeaveIt。如果你想参考别人网站用到什么主题,可以在https://whatcms.org上输入他的网址即可查询。注意不同类型引擎的主题不通用,即用 Hugo 搭建的网站只能用 Hugo 的主题。
导入主题
1
2
cd themes
git clone https://github.com/Mogeko/LeaveIt.git
创建一个新页面
1
hugo new about.md
此时content
文件夹下就多了一个about.md
文件,打开文件就可以看到时间、文件名等信息已经自动生成了。
1
2
3
4
5
---
title: "About"
date: 2019-07-20
draft: true
---
两条---
间的信息是文章的配置信息,有的信息是自动生成的 (如:title、date 等),注意冒号后面要加一个空格,不然会报错。
配置config.toml
config.toml
用于存放整个网站的配置信息。可以参考/devwl.com/themes/LeaveIt/exampleSite/config.toml
,每项配置信息的作用请参照注释和调试结果查看,这里不一一介绍。
拷贝/devwl.com/themes/LeaveIt
下 layouts
static
两个文件夹至devwl.com
下,覆盖已有文件夹。
注意:网站中 About 按钮对应的页面文件about.md
应放到/devwl.com/content
下,其它的文章应放到/devwl.com/content/posts
下。
生成网站
设置完config.toml
后我们执行以下命令
1
hugo server --buildDrafts -w
此时你就可以在 http://localhost:1313 访问到你的博客了
简单介绍一下两个参数:
*--buildDrafts
: 生成被标记为 「草稿」 的文档
*-w
: 监控更改,如果发生更改直接显示到博客上 (保存即可预览效果)
但此时只能在本地访问 (相当于预览博客,如果与期望值不符,可以随时更改),在/devwl.com
目录下执行命令
1
hugo
此时你的博客目录下会多出一个public
文件夹来。这便是 Hugo 生成的静态网站。
到此本地的工作就完成了,下一步到服务器上操作。
上传网站至服务器
创建网站存放目录
1
2
cd /var
mkdir www
用上传工具把刚才用 Hugo 创建的devwl.com
文件夹上传至服务器/var/www
下。
服务器安装 Hugo
先安装 golang
1
yum -y install golang
添加 epel repo
1
2
3
4
5
6
7
8
9
10
11
12
vim /etc/yum.repos.d/hugo.repo #打开文件
#复制进去
[daftaupe-hugo]
name=Copr repo for hugo owned by daftaupe
baseurl=https://copr-be.cloud.fedoraproject.org/results/daftaupe/hugo/epel-7-$basearch/
type=rpm-md
skip_if_unavailable=True
gpgcheck=1
gpgkey=https://copr-be.cloud.fedoraproject.org/results/daftaupe/hugo/pubkey.gpg
repo_gpgcheck=0
enabled=1
安装 Hugo
1
yum -y install hugo
服务器安装 Nginx
安装
1
yum install nginx -y
配置
打开配置文件
1
vim /etc/nginx/nginx.conf
修改配置信息,添加域名、网站存放路径。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name devwl.com; //你的域名
root /var/www/devwl.com/public; //网站文件存放的目录
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
启动 nginx 服务
1
nginx
重启服务命令,需要时才执行
1
nginx -s reload
更新网站内容
可以先在你本机环境下测试,因为服务器上也安装了 Hugo,只需将新增、有改动的文件上传至服务器上对应的路径,执行 hugo 命令即可。注意 hugo 命令要在你的网站根目录下执行。
1
2
cd /var/www/devwl.com
hugo