基于本站快速搭建自己的网站-New from this.
本文介绍基于仓库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、克隆到本地
克隆网站源码到本地并初始化主题仓库
|
|
例如
|
|
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
,并参考附录文章1进行Github配置和域名解析。
3、新建文章
全局文章均保存在content/posts目录,可新建目录自行分类
在仓库根目录使用命令hugo new content/posts/***.md
或新建markdown文件,文件大致内容
|
|
标签内容 | 说明 |
---|---|
title | 文章标题 |
date | 文章时刻 |
draf | 是否是草稿,发布改为false |
tags | 文章标签 |
categories | 文章分类 |
url | 指定文章url,可选默认文件名称 |
4、本地调试
在仓库根目录使用命令hugo server
在本地启动服务器,访问localhost:1313预览
预览为实时预览,修改markdown文件即可实时在网页显示渲染效果
如果想使用docker部署hugo,可参考在仓库文件路径下执行如下命令
|
|
如果希望指定非默认的1313端口,建议在容器内通过指定和宿主机同端口(避免热部署失效问题),参考如下方式
|
|
5、远程推送
正常提交仓库中的文章文件和配置文件等内容
|
|
6、部署GithubPages
仓库已包含自动部署hugo的Github Action,可在提交时自动部署到GithubPages。
四、主题定制
可参考官方收录的主题:Hugo Themes,主题使用可参考对应仓库的说明,本站使用主题:dillonzq/LoveIt
五、高级使用
更多组件使用:FixIt文档
六、部署到vercel
由于GithubPages
国内访问速度较慢,建议使用vercel等替换GithubPages
:参考附录文章2
其中在新建的时候推荐指定hugo版本,默认版本较低可能无法适配主题,推荐指定本地可以运行的hugo版本
- 指定方式一:创建时指定:
Environment Variables
添加变量HUGO_VERSION
,值为hugo版本,例如0.110.0
- 指定方式二:创建后指定:
Project
->Settings
->Environment Variables
,添加变量HUGO_VERSION
,值为hugo版本,例如0.110.0