首页 Nginx+Hugo搭建博客并部署到服务器
文章
取消

Nginx+Hugo搭建博客并部署到服务器

我的博客从最开始的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

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 layoutsstatic 两个文件夹至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
本文由作者按照 CC BY 4.0 进行授权

在CentOS 7中通过Hugo+Caddy+Webhook自动部署网站到服务器

Objective-C和Swift中常见的修饰符