搭建博客教程

在这个时代搭建个人博客已经成为一种潮流，不仅仅是软件工程师，学生、作家、艺术家、音乐家都能从零搭建博客。

搭建一个漂亮舒适的个人博客对记录个人成长有着重要意义！！！

目标

快速搭建个人博客并发布到互联网。

准备

我们将使用Hugo作为我们的框架快速搭建博客。

必备工具: Git、Hugo、Github、Vercel

安装Git
安装Hugo

# 查看hugo版本
hugo version

步骤

Windows用户

1.新建文件夹并命名为hugo-website并打开文件夹

2.使用Github Desktop -> Add -> Create new repository在当前文件夹中创建git仓库

3.创建.gitattributes并且输入以下内容：

* -text

4.创建.gitignore并且输入以下内容：

.DS_Store
.hugo_build.lock
public/
resources/_gen/

5.创建hugo.toml

6.在终端里使用git命令下载网站主题模版

# 下载hugo theme: 该过程需要联网并且确保你能正常访问GitHub
git submodule add 主题github地址 themes/主题名

7.在hugo.toml中添加主题：

theme = "主题名"

8.在本地预览网页

hugo server

如果一切顺利hugo会输出: Web Server is available at //localhost:端口号

这时你可以打开浏览器并在地址栏输入: localhost:端口号即可预览网站

macOS用户

注意：以下内容均在macOS里完成

1.新建文件夹并命名为hugo-website

2.打开terminal并cd到该文件夹

# 在当前目录初始化git
git init

接着你应该可以看到terminal中输出了: Initialized empty Git repository

3.执行以下命令确保正确设置git

# 创建.gitattributes文件
touch .gitattributes

# 告诉git不处理换行符
echo "* -text" >> .gitattributes

# 创建.gitignore文件
touch .gitignore

# 忽略以下文件与文件夹
echo ".DS_Store" >> .gitignore
echo ".hugo_build.lock" >> .gitignore
echo "resources/_gen/" >> .gitignore

4.创建hugo.toml

# 创建hugo.toml文件
touch hugo.toml

5.下载并设置hugo主题

为了方便这里我们默认下载并设置m10c主题，之后根据需求可以自行更改主题。

# 下载hugo theme: 该过程需要联网并且确保你能正常访问GitHub
git submodule add https://github.com/vaga/hugo-theme-m10c.git themes/m10c

# 在hugo.toml里设置主题
echo "theme = 'm10c'" >> hugo.toml

6.在本地预览网页

hugo server

如果一切顺利hugo会输出: Web Server is available at //localhost:端口号

这时你可以打开浏览器并在地址栏输入: localhost:端口号即可预览网站

7.创建内容

# 创建content文件夹
mkdir content

# 在content/posts文件夹下创建名为Test.md的文件
hugo new content/posts/Test.md

开始编辑文章

打开你最喜欢的文本编辑器开始编辑content/posts/Test.md文件:

---
title: "Test"
date: 2023-12-25T02:01:32+08:00
draft: false
---
# Test
Hello, Hugo!

!!! 注意: 将draft修改为false(否则文章无法显示)

TODO: 将该文件夹提交到GitHub

目前的做法是使用GitHub Desktop将该文件夹作为私有仓库提交到GitHub

8.将GitHub仓库关联到Vercel

由于Vercel里的默认hugo版本较旧，我们在本地仓库中创建vercel.json并输入以下内容命令vercel使用较新的hugo:

{
    "build":
    {
        "env":
        {
            "HUGO_VERSION": "0.121.1"
        }
    }
}

然后我们提交更新到GitHub，接着我们打开vercel主页面：

点击Add New Project然后让GitHub授权给Vercel私有仓库读取权限
导入hugo-website仓库，在Framework Preset选择Hugo
点击Deploy部署即可

不出意外的话vercel已经开始托管你的网站了，后续的建设工作需要你的设计与耐心。

注意：设置hugo.toml的baseURL属性也很重要！如果没有正确设置，可能会导致个人网站出现问题。

# 填入vercel分配给你网站的域名
echo "baseURL = 'vercel分配的域名'" >> hugo.toml

注意：在中国🇨🇳特色网络环境下无法正常访问xxx.vercel.app，需要使用VPN。

WuMingZhao/Build

搭建博客教程

目标

准备

步骤

Windows用户

macOS用户

开始编辑文章