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

一、前言

大人,时代变了

最初我打算自己写出整个网站(现在想想真傻),于是学了一些 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 fetchgit pullgit 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>