Back
碳机风云

基于Hugo的osx端静态博客建站笔记

折腾了快一年都没有成功的建站竟然在这个covid day5莫名其妙地成功了。

Before you start…

  • 本人的相关知识基础：接近0

  • 环境：macOS Catalina 10.15.7

  • 静态博客程序：Hugo version 0.104.2

  • 数据储存：GitHub

  • 网站托管与部署：vercel

  • 域名购买：dynadot

  • 基本软件：

    • 终端：强烈建议，系统自带，用来进行建站等命令的输入和执行

    • Github Desktop：强烈建议，用来将存在本地的站点内容push到你的GitHub账户里对应的储存reposit

    • Typora：可选，写博客内容

    • VScode：可选，可作为Typora的免费替代品进行博客内容的书写，同时可以用来调试config文件

  • 利用本笔记参考建站者应至少具备：

    • 英语能力，至少可熟练操作翻译软件。
    • 在搜索引擎上进行检索的能力：跑代码嘛……报错是，很正常的（挠头
    • 科学上网技术：GitHub和vercel已被墙。
    • 信用卡：可选？目前dynadot貌似关闭了支付宝支付通道，信用卡和paypal是可行的。如果可以通过别的方式买到域名或者用vercel分配的域名则信用卡不是必需的。
    • 平常心：真的咱们不建这个站也不耽误吃喝拉撒，与其和机器宝宝生气咱们不如多睡会儿觉呢对不对？

主要参考

  1. Hugo|一起动手搭建个人博客吧

    我搭博客的范本！“看看这个塔塔小家多好看呀我也想自己搭一个” 十足详细的建站说明，Windows用户可以放心大胆进行参考。

  2. 在macOS安装Hugo搭建一个静态博客并发布到GitHub/Gitee

    但是在参考上一条塔塔的建站笔记的时候，前前后后出现很多莫名其妙的报错OTZ

    排错排很久怀疑是不是osx和windows的某些地方需要用不同的手法打通，于是上google，用“osx hugo”关键词随手捉到了这篇，结合上一条一起进行了参考。

超大声鸣谢！！！！！！！

拆解

就像把大象放进冰箱只需要三个步骤，hugo这种静态站点从本地的markdown文件到呈现为url下可读性强的网址页面，基本需要三个过程：

  • 写 | 完善本地内容：写博客，完善网页的框架文件
  • 传 | 将本地内容传送互联网上：使用GitHub的push功能传到你的github帐号的对应容器
  • 做 | 把内容做成网页：使用vercel，让vercel用hugo这个方法将读取到的github容器内内容烹饪成可食用的人言人语

看！是不是非常简单！

所以是哪个傻子懵头转向地卡了一年，一年！

动手

写 | 本地内容创建

参考：在macOS安装Hugo搭建一个静态博客并发布到GitHub/Gitee

注意：本步骤可能会与后续“传”冲突！但是不要紧，首先在这里先把如何使用命令行创建文件学会了，之后不管怎么冲突，都可以解决。推荐先看完全文，对整个流程梳理清楚了，再动手。

  1. 运行终端。

  2. 通过输入命令行，安装Homebrew：是在本地运行Hugo语句及完善网页框架文件的必需步骤。

    可参考How to Install Homebrew on Mac 直接跳到1.2 （随便找的一个参考）

    输入/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

    依照提示安装好homebrew。

    退出终端，下次运行的时候就能应用Homebrew。

  3. 通过输入命令行，安装Hugo：

    运行终端，输入brew install Hugo，按照提示进行Hugo的安装。

    检查一下，输入Hugo version，看到一个版本号说明你的安装成功。你可以随时通过这个方法检查你的Hugo版本号。

  4. 通过输入命令行，创建Hugo站点文件：

    假设你的站点名称为mysite；

    在终端里，输入hugo new site mysite，成功的话就会在终端的运行目录下创建一个名叫mysite的文件夹，里面生成有Hugo用来读取做成网页的文件。小心对待。

    这时，文件夹是直接建立在 /Macintosh HD/用户/用户名称/ 这个文件夹下的。因为这就是默认的终端运行目录。

    如果想把mysite创建在别的文件夹下，则可以在终端中输入命令行 cd 文件夹路径 后，再输入hugo new site mysite建立。

  5. 下载 Hugo主题，放置入 Hugo站点文件 中：这一步连同步骤6都是为了Hugo能做出来一个人看得懂的网页。

    在Hugo官网主题页找一个自己喜欢的主题，点进去这一主题的下载页（一个github页面），下载该主题的压缩包，解压后，复制到 mysite 的 themes 文件夹中。

  6. 调试站点配置文件，应用Hugo主题：

    将 :~/mysite/themes/主题/exampleSite/ 文件夹中的 config.toml 复制到 :~/mysite/ 下，替换同名文件。

    打开 config.toml 文件，检查命令行的theme = "主题" 中，主题是否与 主题文件夹 同名。二者必须统一，否则无法应用主题。

    config.toml文件可修改网站的基础display，具体调整方案请自行检索。

  7. 将站点发布到本地进行预览：

    在终端中，输入 cd 文件夹路径/mysite/，转移到运行文件夹 mysite 后，输入Hugo server，搭建本地服务器，对 mysite 进行发布到本地。

    成功的话，可见：

    hugo v0.104.2+extended darwin/amd64 BuildDate=unknown


​          | EN  

-------------------+-----

 Pages      | 9  

 Paginator pages | 0  

 Non-page files  | 0  

 Static files   | 11  

 Processed images | 0  

 Aliases     | 4  

 Sitemaps     | 1  

 Cleaned     | 0  



Total in 95 ms

    在浏览器中，输入 http:/localhost:1313 则可以对这个本地站点进行预览。

做 | 把内容做成网页

：wait wait! 在你上面写的拆解中，明明还有一步“传”呢？要怎么传呢？

——好问题！

——动一动你聪明的小脑瓜想一想：不先把接收的房子盖好，传送上去的数据是要放到哪里呢？

——对于新建的站点，我们需要把本地传送端和网络接收端都修建完善后，再进行数据的“传”。

参考Hugo | 一起动手搭建个人博客吧 中 #搭建博客

并有所更新。

  1. 注册并使用vercel，连接vercel和你的GitHub：

    这一步的前提是已经注册好了github帐号。

    登录vercel并注册帐号，在 add new下拉菜单中点选project；

    在进入的Let's build something new.页面，选择clone template下Browse All Templates，选择其中的Hugo；

    进入You're almost done.页面，在Create Git Repository中点选GitHub按钮，在弹出的Repository Name输入框中输入欲创建的容器名称，如repository；

    点Create，等一会儿就会出现Congratulatons!页面，说明vercel已经成功在你的GitHub账户下创建了名叫repository的容器，并且已经将其与vercel下的这个project连接。

    点击页面左上角的你的头像，在出现的麻将牌Overview页面点你新建的project，弹出的Production Deployment页面显示了基本信息，其中的Domains下则显示了vercel分配给你的站点的可访问链接。

  2. 因为vercel应用的Hugo版本较旧，需要手动更改设置，提醒它用xxx版本的Hugo：

    点进vercel的这个新project，在页面左上角你的用户名下可以发现一个叫Settings的页面，点击进入；

    左侧边栏，点击Environment Variables，进入页面，在key输入框输入HUGO_VERSION，value输入框输入版本号；

    不知道版本号？看写的第3步。

  3. 点Save，保存修改。

    本来到这里就已经结束了，但是因为现在vercel已经被墙，需要绑定一个可以从墙内访问的网址。

    当然要是你不需要墙内访问自己的站点的话，下面的步骤可以直接跳过。

  4. 注册并使用dynadot，购买域名：

    直接进入dynadot网站，找一个顺眼的域名，支付成功后，点页面右上角的自己的账户；

    左侧边栏，在My Domains下点Manage Domains，在出现的域名列表中，点选刚买好的域名那行的DNS Settings；

    跳转出的页面里，最上面的下拉菜单选Name Servers，在Enter your hosting provider's name server names.下的输入框，输入ns1.vercel-dns.com和ns2.vercel-dns.com进行服务器添加，保存更改；

    页面会跳转回Manage Domains，再点DNS Settings处，跳转的页面的下拉菜单选Dynadot DNS，后在下面的Domain Record中Record Type下拉菜单选CNAME，后面的输入框输入cname.vercel-dns.com，其他选项不用动，保存更改；

  5. 让vercel知道这个新域名：

    回到vercel的Production Deployment页面，点Settings，选左侧边栏的Domains；

    在输入框中输入购买的域名，点框框右侧的Add；

    在弹出的对话框中，选最下面的那个Add 域名；

    点ADD，vercel就知道要把网页做到这个域名下啦。

传 | 将本地内容传送互联网上

参考Hugo | 一起动手搭建个人博客吧 中 #搭建博客

  1. 下载GitHub Desktop，并与自己的GitHub帐号相关联；

  2. 进入Clone Repository功能下，在弹出的对话框的Your Repositories下选中刚创建的repository，Local Path输入框中输入一个空的文件夹路径；

    这一步的目的是把GitHub端的repository关联到这个文件夹中。由于第一次是全面覆盖，把vercel放在这个repository中的所有做页面需要的文件都下载下来，所以要求这个文件夹是空的。

    如果按照刚才的流程一步步走下来，可以发现这时候会出现一个问题：用来建站的mysite这时已经有了文件，不再是一个空的文件夹了。

    对于这个问题，我的处理方法是，放弃mysite，先做好这个空文件夹，把GitHub的repository数据下载（“pull”）下来，之后再在这个新文件夹里，把之前对mysite的一应操作补全。

    是不是有种受骗了的感觉

    杀掉热腾腾新出炉的mysite，我好狠的心

  3. 把完善好的新文件夹中内容，推送（“push”）到GitHub的容器中：

    打开GitHub Desktop，在左侧边栏中下方的Summary输入框中，输入对本次推送的起名（什么都行）（有必要的话可以在下方Description写个简介）；

    点下方Commit to main按钮；

    上方菜单栏的pull此时变成push；

    点push，上传！

顺利的话，敲锣打鼓，大工告成！！

现在，你可以堂堂访问你的域名见到你的网页啦！！

总结

  • 本文介绍了osx端基于hugo的静态博客建设方法；
  • 虽然成功了，但是流程顺序有待优化（谁见过教人亲手杀掉刚有感情的文件夹的教程啊）
  • 虽然之后会装修，但是不想写装修教程了，写不动嘤嘤嘤……
  • 举着大喇叭鸣谢塔塔和互联网众卿家！

End

2022.12.15 于泥犁中

©花好月园HuaHaoYue Garden

comments powered by Disqus
© 2020 - 2024 花好月园 HuaHaoYue Garden· 0Days
共书写了33.8k字·共 14篇文章

Built with Hugo
Theme Stack designed by Jimmy
© Licensed Under CC BY-NC-SA 4.0
//