从一个空文件夹开始

Last updated Jan 10, 2022

• Hugo
• 个站

先找一个空地，创建一个文件夹——这时候文件夹是完全空的。

在最初的阶段，这个文件夹会被作为 Git 仓库，在本机和网站服务器之间同步。

Hugo - Quick Start

在空文件夹打开 cmd, 输入以下命令，其中mysite是你的站点名称：

hugo new site mysite

完成之后，第一件事是配置 Hugo主题，否则无法正常使用。官方 Hugo Themes 提供了很多，挑中哪个主题，跟随主题的指引下载主题即可。主题可以更换。

下载完之后，记得在 config.toml 中加上想要使用的主题名：

theme = ‘YOURTHEMENAME’

也可以像我一样打造自己的Hugo主题

主题完成配置后，在站点根目录，使用以下命令创建一篇post:

hugo new /posts/fisrt-post.md

这样就在 /content/posts 下创建了一个 md 文件。可以用 Markdown 写文章啦。

在根目录使用指令：

hugo serve -D

启动 Hugo server。 -D 参数指也输出草稿文件(draft:true的md文件)。然后就能在浏览器用 http://localhost:1313/ 查看现在站点的样子了。这个功能相当于实时预览。一般的修改都能直接反映出来。但如果修改了 toml 文件就可能需要重新启动 Hugo server 才能生效。

hugo server 等价于 hugo serve

如果要生成静态页面(也就是最后可被 Nginx 部署的页面)，就要用

hugo

指令。不过我们只在服务器上部署，就不必在本机执行这个指令了。

如果你已经有了域名，在部署之前，必须把 config.toml 里的 baseURL 改成 你自己的域名。否则生成的静态页面会出问题。

这里默认你对 Git 有一定了解.

先在 Github 新建一个仓库。

关掉 Hugo server, 在 Hugo 应用根目录打开 cmd 或 git bash(记得改相应参数啊):

1
2
3
4
5
6

git init
git add .
git commit -m 'first commit'
git remote add origin git@github.com:evixenon/tongluoshao.git
git branch -M main
git push -u origin main

OK, 在服务器端就可以 clone 这个仓库了.

首先在服务器安装 Hugo 和 Nginx 。

我的是 Ubuntu 系统：

1
2

sudo apt install nginx
sudo apt-get install hugo

如果服务器出现 E:Unable to locate package xxx 错误，运行以下命令更新一下apt:

sudo apt update

把仓库克隆下来后，在 Hugo 应用的根目录运行

hugo

这样在根目录下就生成了一个 public 文件夹

Nginx 的配置入门可以看看 官方教程。现在只要弄让 Nginx 把网站呈现出来就可以了。

用我自己的例子讲一下 Nginx 的配置，我在根目录下把建了一个 /www 文件夹，并把我的 git 仓库在这里克隆下来。

1
2
3

cd /
mkdir /www
git clone git@github.com:evixenon/tongluoshao.git

然后修改 Nginx 的配置文件，位置在 /etc/nginx/nginx.conf .

配置文件的 http 部分加了如下内容:

1
2
3
4
5
6
7
8
9

server {
    listen  80;
    server_name     www.tongluoshao.space tongluoshao.space;

    location / {
            index index.html;
            root /www/tongluoshao/blogs/public;
    }
}

location / 里的 root 指向生成的静态页面，也就是上一步生成的 public 文件夹。 server_name 写你的域名。如果没有域名，IP也是可以用的。

这样就可以用了。然后重新载入一下 Nginx:

nginx -s reload

然后就可以从外面访问服务器啦。

参考：

快速搭建https网站: Hugo + Nginx + Let’s Encrypt (certbot)

Hugo - Quick Start