用GitHub服务器免费搭建博客
安装环境(Linux)
安装Hugo
yum系
sudo yum install hugo -y
Arch
sudo pacman -S hugo
deb系
sudo apt install hugo
安装Git(系统已经预装的自行忽略)
yum系
sudo yum install git
Arch
sudo pacman -Syu git
deb系
sudo apt install git
安装环境(Windows)
安装Hugo
https://gohugo.io/getting-started/installing/#less-technical-users
安装Git
winget install Git.Git
开始建站.UwU.!
GitHub项目创建
P.S. 因为众所周知的原因。。在某些地区GitHub无法访问= =
解决方案: 魔法上网/换Gitee(要实名= =)
-
创建一个名为
你的Github用户名.github.io的项目 -
放在那里备用
本地网站搭建
注意：我本地环境是Kali Linux, 其他环境可能步骤略有不同= =
终端/cmd/或者你用的其他东西也罢输入
hugo new site 你想给网站起的名字
这个时候Hugo就给你生成了一个网站
接下来该犯选择综合征了
咳咳，接下来去https://themes.gohugo.io/ 找一个喜欢的主题
P.S. 我的博客是主题Stack
进入你本地hugo网站的themes目录
cd 网站名/themes
然后把你的主题放进去.qaq.
git clone 你的主题的GitHub网址.git
等你的主题静静的躺在那里了之后 逃)，依据文档配置你的网站
Stack的文档 https://docs.stack.jimmycai.com/zh/
Stack 主题的简单配置
-
把
你的网站名/themes/hugo-theme-stack/exampleSite/目录下的config.yaml复制到网站根目录(也就是你的网站名这个目录) -
删除网站根目录的
config.toml -
然后打开网站根目录下的
config.yaml进行填空
几个Tip(踩过的坑):
博主头像放在
/themes/hugo-theme-stack/assets/img/下关于那个头像下的emoji,如果你不想加上，emoji那一行留空就好
Stack排坑
Edit:
嘛。。。。自从我出了这篇文章之后，很多人都成为了StackStack人((
既然这个主题这么受欢迎，那就详细来扯扯我配置的心得吧w
Q1:文章不显示在首页怎么办
修改你网站根目录下的config.yaml
params:
mainSections:
- posts
Q2:评论区如何配置
我这里选用的是Gitalk
comments:
enabled: true #开启评论功能设置为true
provider: gitalk #提供平台，我这里是gitalk,当然你也可以选择其他的
#注意:提供平台选哪个下面的就填哪块区域
gitaik配置:
gitalk:
owner: 你的GitHub用户名
admin: 你的GitHub用户名
repo: 你的GitHub仓库名 #(注意不是网址!!!!!!!)
clientID:
clientSecret:
#ClientID和ClientSecret请不要随意告诉他人哦~
ClientID和ClientSecret获取方法:
去GitHub开发者设置里新建一个OAuth App
然后就填空啦:
Applicaton Name:随便起个名字
Homepage URL:你博客的url
Application description:描述，随便写
Authorization callback URL:你博客url
Enable Device Flow 不勾选
保存后就可以获得ClientID，在它的下面(Client Secret框里)点击Generate a new client secret
然后记得保存好，因为Client Secret你只能看到一次
Q3:关于自定义和美化
这个自定义的话，其实感觉没什么特殊的必要，往往就是加一些奇奇怪怪的东西上去，但还是扯两句
与自定义相关的路径(如没有可以自己添加)
网站根目录/layouts/partials/head/custom.html #插入所有页面头部的HTML
网站根目录/layouts/partials/footer/custom.html #插入所有页面底部的HTML
网站根目录/static/ #资源文件路径 e.g. js css ...
最后放一个我写的Stack博客美化的懒人方法
本地网站试运行
在你的网站根目录下打开终端/cmd/或者你喜欢的命令行工具
输入
hugo server
然后就可以在本机浏览器输入http://127.0.0.1:1313/看到你的网站啦qaq
写博客
关于Markdown
写博客前先熟悉一下MarkDown语法
小Tip:可以用MarkText(一款开源markdown编辑工具)写Blog,会舒适很多
(我就是用的这个工具写这篇文章的)
关于目录结构
-
你的文章是在
网站根目录/content/posts/下 -
你的"分类"在
网站根目录/content/categories下
试着尝试一下吧qaq
首先我们要创建一个md文件
在网站根目录打开终端/cmd/…并输入
hugo new posts/随便一个名字/index.md
然后打开index.md
将预先生产好的内容更改成
---
title: "文章标题"
description: "简介"
date: 2022-01-29T02:02:45-05:00
image: "你同目录下的封面图片名字(带后缀并且是相对路径)"
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
---
注意：不同主题的格式可能不一样，如你没有使用Stack主题，快去查看文档
之后就可以书写文章内容了
Tip:你引用的图片放在同目录下
发布网站上GitHub
呼，完成这一步后，你的网站就可以公大家浏览了
注意：之后本地的环境不要丢，之后继续发布博客的时候还有用
发布网站
在网站根目录打开终端/cmd/等等，并输入
hugo --theme=主题文件夹名
进入public准备发布
cd public
发布上GitHub
git init
git add -A
git commit -m "对这次发布的说明"
git remote add origin https://github.com/你的Github用户名/你的Github用户名.github.io.git
git push -u origin master
接下来输入你的用户名和你的GitHub个人访问Token(不是密码，帐号密码已经不支持了)
申请Token方法
-
去设置->开发者设置
-
申请一个
Personal access tokens
发布成功后
现在，这个网站就可以脱离本地环境供大家访问了
链接: https://你的Github用户名.github.io/