我的博客从最开始的LNMP+WordPressJekyll+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
brew install hugo

可能会出现 brew 升级,大概需要5分钟,不想升级的ctrl+c取消掉就行了。验证Hugo是否安装成功可以查一下 Hugo 版本。

hugo version
创建网站

先选择存放网站的路径后执行以下命令,把heap.fun换成你都网站名或自己喜欢的名字即可。

hugo new site heap.fun 

进入创建好的网站目录

cd heap.fun

此时的目录结构应该是这样的

.
├── archetypes # 内容类型,在创建新内容时自动生成内容的配置
├── content # 网站内容,Markdown 文件
├── data
├── layouts # 网站模版,选择主题后会将主题中的 layouts 文件夹中的内容复制到此文件夹中
├── static # 包含 CSS、JavaScript、Fonts、media 等,决定网站的外观。选择主题后会将主题中的 ststic 文件夹中的内容复制到此文件夹中
├── themes # 存放主题文件
└── config.toml # 网站的配置文件

然后可以找个主题,我的博客的主题用的是LeaveIt。作者是mogeko,他的博客地址是https://mogeko.me,里边有几篇文章是对这个主题的介绍。

如果你想参考别人网站用到什么主题,可以在https://whatcms.org上输入他的网址即可查询。注意不同类型引擎的主题不通用,即用Hugo搭建的网站只能用Hugo的主题。

导入主题

cd themes
git clone https://github.com/Mogeko/LeaveIt.git

创建一个新页面

hugo new about.md

此时 content 文件夹下就多了一个 about.md文件,打开文件就可以看到时间、文件名等信息已经自动生成了。

---
title: "About"
date: 2019-07-20
draft: true
---

两条 --- 间的信息是文章的配置信息,有的信息是自动生成的 (如:title、date 等),注意冒号后面要加一个空格,不然会报错。

配置 config.toml

config.toml 用于存放整个网站的配置信息。可以参考/heap.fun/themes/LeaveIt/exampleSite/config.toml,每项配置信息的作用请参照注释和调试结果查看,这里不一一介绍。

拷贝/heap.fun/themes/LeaveItlayoutsstatic两个文件夹至heap.fun下,覆盖已有文件夹。

注意:网站中About按钮对应的页面文件about.md应放到/heap.fun/content下,其它的文章应放到/heap.fun/content/posts下。

生成网站

设置完 config.toml 后我们执行以下命令

hugo server --buildDrafts -w

此时你就可以在 http://localhost:1313 访问到你的博客了

简单介绍一下两个参数:

  • --buildDrafts: 生成被标记为 「草稿」 的文档

  • -w: 监控更改,如果发生更改直接显示到博客上 (保存即可预览效果)

但此时只能在本地访问 (相当于预览博客,如果与期望值不符,可以随时更改),在/heap.fun目录下执行命令

hugo

此时你的博客目录下会多出一个 public 文件夹来。这便是 Hugo 生成的静态网站。

到此本地的工作就完成了,下一步到服务器上操作。

上传网站至服务器

创建网站存放目录

cd /var
mkdir www

用上传工具把刚才用 Hugo 创建的 heap.fun文件夹上传至服务器 /var/www下。

服务器安装Hugo

先安装golang

yum -y install golang

添加epel repo

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

yum -y install hugo

服务器安装Nginx

安装

yum install nginx -y

配置

打开配置文件

vim /etc/nginx/nginx.conf

修改配置信息,添加域名、网站存放路径。

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  heap.fun; 	//你的域名
        root         /var/www/heap.fun/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服务

nginx

重启服务命令,需要时才执行

nginx -s reload

更新网站内容

可以先在你本机环境下测试,因为服务器上也安装了Hugo,只需将新增、有改动的文件上传至服务器上对应的路径,执行hugo命令即可。注意hugo命令要在你的网站根目录下执行。

cd /var/www/heap.fun
hugo

关于https和自动部署

Nginx 申请自动续期https并不难,自动部署麻烦一点,感兴趣的可以自行搜一下。这两个我打算用Caddy来做,会在下一篇文章中介绍。