基于本站快速搭建自己的网站-New from this.

2023-02-08 2024-02-22 约 1747 字预计阅读 4 分钟 - 条评论

本文介绍基于仓库ns-cn/ns-cn.github.io使用Hugo和Github Pages搭建个人博客，主题由原LoveIt替换为FixIt

一、依赖组件

组件	说明
Github	Github账号密码
git	本地需安装git
hugo	如需本地调时需安装hugo(官网、安装手册)

二、Get Started

核心步骤

三、流程

1、克隆仓库

1.1、fork仓库

登录github并fork仓库ns-cn/ns-cn.github.io、修改仓库名称为{user-name}.github.io，例如github用户名为tom，则克隆仓库名称为tom.github.io

注：如果仓库名不为{user-name}.github.io，则最后生成的网站访问链接为{user-name}.github.io/{repo-name}，例如tom的博客仓库为blog，则则最后的访问链接为tom.github.io/blog

1.2、克隆到本地

克隆网站源码到本地并初始化主题仓库

1
2
3
4


git clone {your-repo}
cd {your-repo}
git submodule init
git submodule update

例如

1
2
3
4


git clone https://github.com/ns-cn/ns-cn.github.io.git
cd ns-cn.github.io
git submodule init
git submodule update

2、初始化

初始化主要是根据自己的情况删除不必要的原始文章，并根据个人修改配置网站配置

2.1、初始文章

原始文章在目录content中，需删除原始内容并自行新增，针对content内容做简单说明

目录	说明
about	关于页面，可根据自行需要删除
best	收藏页面，可根据自行需要删除
opensource	开源页面，可根据自行需要删除
posts	文章原始目录，写的markdown文章就放在这里面
start	导航页面，可根据自行需要删除
tags	标签页面，按标签索引，不建议删除

2.2、网站配置

修改hugo的全局配置文件config.toml，可手动搜索ns-cn搜索个人相关配置，进行修改

2.3、网站菜单

通过配置languages.zh-cn.menu.main进行全局菜单栏配置

2.4、配置域名

如果需要个性化定制域名，可修改CNAME文件为自己的域名，例如tangyujun.com，并参考附录文章¹进行Github配置和域名解析。

3、新建文章

全局文章均保存在content/posts目录，可新建目录自行分类

在仓库根目录使用命令hugo new content/posts/***.md或新建markdown文件，文件大致内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


---
title: "基于本站快速搭建自己的网站-New from this."
date: 2023-02-08T09:56:29+08:00
draft: true
tags: [TAG]
categories: [ThinRedLine]
url: /posts/thinreadline/new-from-this/
---

## markdown正文

标签内容	说明
title	文章标题
date	文章时刻
draf	是否是草稿，发布改为false
tags	文章标签
categories	文章分类
url	指定文章url，可选默认文件名称

4、本地调试

在仓库根目录使用命令hugo server在本地启动服务器，访问localhost:1313预览

预览为实时预览，修改markdown文件即可实时在网页显示渲染效果

如果想使用docker部署hugo，可参考在仓库文件路径下执行如下命令

1
2


docker pull klakegg/hugo:0.107.0-ext-ubuntu-onbuild
docker run --rm -it -v $(pwd):/src -p 1313:1313 klakegg/hugo:0.107.0-ext-ubuntu-onbuild server -DEF

如果希望指定非默认的1313端口，建议在容器内通过指定和宿主机同端口（避免热部署失效问题），参考如下方式

1

docker run --rm -it -v $(pwd):/src -p 80:80 klakegg/hugo:0.107.0-ext-ubuntu-onbuild server -p 80 -DEF

5、远程推送

正常提交仓库中的文章文件和配置文件等内容

1
2


git commit -a -m "新文章"
git push

6、部署GithubPages

仓库已包含自动部署hugo的Github Action，可在提交时自动部署到GithubPages。

四、主题定制

可参考官方收录的主题：Hugo Themes，主题使用可参考对应仓库的说明，本站使用主题：dillonzq/LoveIt

五、高级使用

MarkDown进阶之Mermaid绘图

更多组件使用：FixIt文档

六、部署到vercel

由于GithubPages国内访问速度较慢，建议使用vercel等替换GithubPages：参考附录文章²

其中在新建的时候推荐指定hugo版本，默认版本较低可能无法适配主题，推荐指定本地可以运行的hugo版本

指定方式一：创建时指定：Environment Variables 添加变量HUGO_VERSION，值为hugo版本，例如0.110.0

指定方式二：创建后指定：Project-> Settings -> Environment Variables，添加变量HUGO_VERSION，值为hugo版本，例如0.110.0