为了防止时间太久忘记方法,建站的要点还是要记录一下的。
一、前言
大人,时代变了
最初我打算自己写出整个网站(现在想想真傻),于是学了一些 html 和 css 知识。后来打开第一个 txt 文件准备动手写主页 html 文件时,我发现,我一点也写不下去,几个标签下来就厌倦不已,想完全掌握并熟练运用这些知识需要很长时间,就算掌握了它们,写出漂亮页面还需要想象力和创造力——短期内根本不可能写出完整的网页。最重要的是它们非常繁琐,一个人要投入多少时间精力才能搞定所有工作啊!
后来看到网友的一句话——独自造轮子的时代已经结束了,前人已经帮你把模型调好了——我才恍然大悟。我们这个时代太快了,闭门造车的做法很是愚蠢,学会借力前行才是。所以后来果断选择使用 hugo 引擎来做网站——它的作用是,你给出参数(模型),它负责组装。
不过 html 和 css 知识也没有白学,因为对网页结构有了解的话,知道什么是标签,什么是属性和值,以及它们的基本规则,与网页打交道时很有帮助,才有可能根据自己喜好修改主题的细节。
选择 Hugo
网站生成器有很多,我看到许多人建站都会经历兜兜转转的过程,工具从 wordpress 到 hexo ,再到 hugo ,再到 wordpress ……所以我想避免这个坑,于是在开始动手之前花了许久做决定,我的要求是经济、高效、方便—— Hugo 最适合不过了——静态网页经济安全,Hugo生成速度最快,也不需要服务器。
二、Hugo 的使用
文件目录
这是每个文件夹存放的内容及其作用的标准格式。
- archetypes
- 在default.md文件中存放文章页面参数
- content
- 存放所有文章,如关于、分类、以及每篇文章
- layouts:存放生成页面所使用的模板、参数
- _default
- 页面模板
- 如list.html是列表页的模板,page.html是普通页的模板
- hugo渲染并生成页面的本质:内容+模板=页面
- partials
- 配件模板
- 如footer.html是页面底部区域的模板,header.html是页面头部的模板
- 页面模板中常会引用这些配件模板
- shortcodes
- 短代码
- 在文章中固定格式的简洁代码,如引用bilibili的视频,插入网易云的音乐,所使用的代码存放在这里
- 这个思维导图,以及顶部的音乐都是短代码的功劳
- 如有需要,欢迎留言
- _default
- static
- img
- 存放图像
- css
- css模板
- css的作用是让页面更漂亮,就像穿了新衣服
- js
- JavaScript
- img
- themes
- 存放所有的主题
常用指令
- 查看版本:
hugo version
- 新建库:
hugo new site 666
- 在当前目录下,新建一个名为"666"的文件夹,其中内置应有的结构
- 新建文章:
hugo new post/name.md
- 意思是在content/post文件夹内,生成一个名为name.md的文件
- 生成网页:
hugo
- 根据你的内容和主题生成静态网站,所有文件保存在 public 文件夹中,如果该文件夹已经存在同名文件,则会覆盖它们,但不会删除。
- 查看效果:
hugo server
- 启动本地服务器,用于预览生成的网站,任何修改都实时反应在网页预览中。
- 在本地浏览器中输入
http://localhost:1313
网址即可访问。
- 主题
- 我用的笨方法,下载主题zip包并解压到themes文件夹,之后在config文件中设置
theme
参数为主题名。
- 我用的笨方法,下载主题zip包并解压到themes文件夹,之后在config文件中设置
- 站内引用文章
- 知道越多越不快乐?:
[知道越多越不快乐](https://1xiaoyuan.github.io/archives/%E4%B8%BA%E4%BB%80%E4%B9%88%E9%95%BF%E5%A4%A7%E5%90%8E%E4%BC%9A%E5%8F%98%E5%BE%97%E4%B8%8D%E5%BF%AB%E4%B9%90.html/)
- 知道越多越不快乐?:
- 引用图片

三、Github 的使用
配置 Github SSH
- 打开 Git Bush,输入
ssh-keygen
生成 SSH 密钥(默认全回车); - 在 Git Bush 输入
ls -al ~/.ssh
,检查密钥是否存在,复制返回的“id_rsa.pub”; - 在 Git Bush 输入
cat ~/.ssh/id_rsa.pub
,复制返回的公钥内容; - 登录 Github 帐号,点击右侧头像-“Settings”-“SSH and GPG keys”-“New SSH key”,创建新的 SHH Key
- 在 Git Bush 输入
ssh -T [email protected]
验证是否配置成功- 成功后会显示:
Hi 用户名! You've successfully authenticated, but GitHub does not provide shell access.
- 成功后会显示:
初始化本地仓库配置
cd public
git init
git remote add origin https://github.com/ooxx/pornhub.github.io.git #与仓库建立连接,新电脑需要先配置 SSH
git config --global core.autocrlf false #设置 Git 不转换换行符
git add -A
git commit -m "自行填写备注"
git push -u origin main #master/main
使用
git remote add origin
是为了将远程仓库引用到本地仓库,之后便可以通过git fetch
、git pull
、git push
等命令与远程仓库进行交互。
这是以后每次上传的代码
cd public
git add .
git commit -m "自行填写备注"
git push
当本地和云端仓库文件不一致时,需要现将云端拉取到本地,再重新上传
cd public
git pull origin main
git push origin main
删除仓库内容
想要删除远程仓库中的内容,不删除本地文件,也不删除仓库。其实我不太会用,琐碎的代码先放在这吧。
$ git pull origin master # 将远程仓库里面的项目拉下来
$ dir # 查看有哪些文件夹
$ git rm -r --cached target # 删除你要删除的文件名称,这里是删除target文件夹(cached不会把本地的flashview文件夹删除)
$ git commit -m '删除了target' # 提交,添加操作说明
git push -u origin master #重新提交(若需要对其他分支进行操作,则把master换为对应分支,如:git push -u origin dev)
自定义域名
假如不考虑 CDN ,只为 Github Page 配置一个自定义域名,怎么做?
- 购买域名,等待实名认知通过;
- 在 Github Page 的设置中输入域名;
- 在域名购买网站进行域名解析,新增记录如下:
www CNAME记录 username.github.io
@ A记录 185.199.108.153
@ A记录 185.199.109.153
@ A记录 185.199.110.153
@ A记录 185.199.111.153
- 在 Github Page 的设置中勾选强制 HTTPS.
三、其他
评论系统(已关闭)
本站使用的是 utterances 的服务:只需创建一个 github 仓库即可。无广告、配置简单,轻量开源评论系统,一点也不折腾,10分钟之内就能搞定;缺点是需要登陆Github账号才能评论。
-
先在 github 创建一个新库,要设为公开 public,然后 点击这个链接配置 到新库。
-
下面代码放在 congig.toml 文件中
[params.utteranc]
enable = true
repo = "1xiaoyuan/comment" #换成自己的 "用户名/仓库名"
issueTerm = "pathname"
theme = "github-light"
- 下面的代码放在模板
footer.html
文件中,一般放在底部
<script src="https://utteranc.es/client.js"
repo="1xiaoyuan/comment" #换成自己的 "用户名/仓库名"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>