为了防止时间太久忘记方法，建站的要点还是要记录一下的。

一、前言

大人，时代变了

最初我打算自己写出整个网站（现在想想真傻），于是学了一些 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的视频，插入网易云的音乐，所使用的代码存放在这里
      • 这个思维导图，以及顶部的音乐都是短代码的功劳
      • 如有需要，欢迎留言
  • static
    • img
      • 存放图像
    • css
      • css模板
      • css的作用是让页面更漂亮，就像穿了新衣服
    • js
      • JavaScript
  • 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参数为主题名。
  • 站内引用文章
    • 知道越多越不快乐？：[知道越多越不快乐](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/)
  • 引用图片
    • ![实例](/img/posts/实例.png)

三、Github 的使用

配置 Github SSH

  1. 打开 Git Bush，输入 ssh-keygen 生成 SSH 密钥（默认全回车）；
  2. 在 Git Bush 输入 ls -al ~/.ssh，检查密钥是否存在，复制返回的“id_rsa.pub”；
  3. 在 Git Bush 输入 cat ~/.ssh/id_rsa.pub ，复制返回的公钥内容；
  4. 登录 Github 帐号，点击右侧头像-“Settings”-“SSH and GPG keys”-“New SSH key”，创建新的 SHH Key
  5. 在 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 配置一个自定义域名，怎么做？

  1. 购买域名，等待实名认知通过；
  2. 在 Github Page 的设置中输入域名；
  3. 在域名购买网站进行域名解析，新增记录如下：
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
  1. 在 Github Page 的设置中勾选强制 HTTPS.

三、其他

评论系统（已关闭）

本站使用的是 utterances 的服务：只需创建一个 github 仓库即可。无广告、配置简单，轻量开源评论系统，一点也不折腾，10分钟之内就能搞定；缺点是需要登陆Github账号才能评论。

  1. 先在 github 创建一个新库，要设为公开 public，然后 点击这个链接配置 到新库。

  2. 下面代码放在 congig.toml 文件中

  [params.utteranc]
  enable = true
  repo = "1xiaoyuan/comment"           #换成自己的 "用户名/仓库名"
  issueTerm = "pathname"
  theme = "github-light"
  1. 下面的代码放在模板 footer.html 文件中，一般放在底部
<script src="https://utteranc.es/client.js"
    repo="1xiaoyuan/comment"      #换成自己的 "用户名/仓库名"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>