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

本文基于仓库lmj-cn/lmj-cn.github.io和ns-cn/ns-cn.github.io使用Hugo和Github Pages搭建个人博客

一、依赖组件

二、核心步骤

三、基本流程

1.克隆仓库

1.1、fork仓库

登录github并fork仓库lmj-cn/lmj-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/lmj-cn/lmj-cn.github.io.git
cd lmj-cn.github.io
git submodule init
git submodule update

2、初始化

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

2.1、初始文章

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

2.2、网站配置

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

2.3、网站菜单

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

2.4、配置域名

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

2.5 修改头像

替换static内的所有图像文件。

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-21T05:53:46Z
draft: false
tags: [DoItYourself]
categories: [Skills]
url: /posts/skills/new-from-this/
---

## markdown正文

4、本地调试

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

预览为实时预览，修改markdown文件即可实时在网页显示渲染效果 如果想使用docker部署hugo，可参考在仓库文件路径下执行如下命令

目前MAC可以使用docker安装，window使用docker安装无法实时更新修改内容，原因不明。windows直接安装hugo，建议安装ext版本。

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

5、远程推送

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

1
2

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

6、部署GithubPages

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

四、主题定制

可参考官方收录的主题：Hugo Themes，主题使用可参考对应仓库的说明，本站使用主题：FixIt 以本站为例，在本地仓库目录执行以下命令，并且修改config.toml文件的theme = “FixIt"处，即可修改主题。

1
2
3

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git commit -a -m "fixit"
git push

更多组件使用：FixIt文档