免费创建个人静态网站最佳实践：hugo+github+netlify

Mon, 25 May 2020 15:56:11 +0800

一、前言

关于搭建一个博客或个人网站的好处不用我多说，但创建网站的难度可能会让人望而却步。本人从网络上获得过很多帮助，学到很多。很早就萌发了自己建网站并分享知识的想法，但是又不想在简书这类的网站上写作。原谅我是个拖延控，有时间就写一点，很可能一篇文章写好久，也不喜欢在网上编辑。此外，知识需要积累形成框架，由于平时我所有的笔记都放在有道云笔记中，复制粘贴到简书有时候格式不对，又不想进行二次编辑。最重要的是不够Geek（装逼）。

其实中间有过一段时间，利用hexo、github和github page创建过静态网站。但是用得不太顺手，原因有很多，比如：老是花时间在怎么改网页主题上，而不是专注在写作上；markdown（md）文件中的图片迁移很麻烦，网上的图片老是会丢失；github page 在国内打开很慢而且SEO不容易搜索到。因此，一直耽误到现在，但一直贼心不死，想得到一个不太需要维护，可以专注写作，文档可以同步（在别的电脑上也可以编辑），又很geek的网站。我的想法是把所有笔记保存在有道云笔记中进行维护和整理，需要分享的话可以在本地用typora写md文档。此外，md文档中的图片用图床解决移动问题，然后托管到git自动渲染成网页。这样只要图床不挂，分享或上传到其它平台就很方便，因为只要复制md文档就行。为什么不直接用有道云笔记中的md呢？因为插入图片得是VIP才行，而导出来的md文档里所有图片的超链接是私人链接，移到别的地方根本没办法显示图片。最终我觉得搭网站最好的方式是：hugo+github+Netlify。适合我的笔记保存和写作的最佳方式是：有道云笔记+typora+picgo。如果觉得太麻烦了，不想把博客和有道云笔记等之类的笔记工具连接在一起，也不会传到其它平台上，可以直接用typora写作，利用hugo的page bundle绑定图片。

关于利用hugo和Github建网站的博客很多，但是有些博客内容有些出入，可能是由于英文翻译或版本更新所造成的。这里建议大家直接看hugo的英文官网和hugo in action，或者官方翻译。此外，网上的博客可以进行参考。这篇博客主要针对搭建过程中可能遇到的问题进行记录，希望对大家有所帮助。

二、原理

那么如何用静态网页创建网站呢？很多博客一上来就直接讲方法，怎么一步步运行，得到一个简陋的网页。但是不知其所以然，因此这里想先介绍一下基本原理，方便理解和后面的debug。

首先你得在本地生成静态网页文件。这里推荐用hugo或hexo。
然后把静态网页文件托管到github仓库。这里推荐使用git和gitlab工具。
把远程的静态网页文件进行渲染，形成让大家可根据网址直接阅览的网页。可用github page和Netlify.
找到有道云笔记的md文件，用typora进行编辑，并用图床解决图片容易丢失问题。

关于hugo和hexo，github和gitlab，github page和Netlify的差别网上有很多博客，这里就不赘述了。目前我觉得最好的方式是：hugo+github+Netlify。

三、快速入门

如果有相关静态网页生成的经历，可以直接忽略快速入门，直接到下一节：进阶。

1、本地生成静态网页文件

如果不想看英文的，可以参考这篇和这篇中文入门。

下面简要阐述过程：

hugo new site hugo #建立站点以后，博客根目录下默认有这些文件和子目录：archetypes/ config.toml content/ data/ layouts/ static/ themes/
cd hugo
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # 安装主题
echo 'theme = "ananke"' >> config.toml
hugo new posts/my-first-post.md
hugo server

这时出现类似下面的信息，说明生成静态网页成功。可以在浏览器上输入 http://localhost:1313/ 进行浏览。

Building sites …
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 1
Static files | 39
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Built in 37 ms
Watching for changes in E:\blogs\hugo\{archetypes,content,data,layouts,static,themes}
Watching for config changes in E:\blogs\hugo\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

如果出现下面的错误：

hugo new posts/my-first-post.md
Error: "E:\blogs\quickstart\config.toml:3:1": unmarshal failed: Near line 3 (last key parsed ''): bare keys cannot contain '\x00'

这是因为E:\blogs\hugo\config.toml里面有一些NUL的间隔符，可能是由于echo的命令产生的。手动把它们删除就行了。

2、托管到github

把我们本地生成的静态网页托管到github上进行保存，而不用自己进行维护。
首先在github上新建账号，并创建一个新的仓库，以仓库名为test为例。再下载安装git 。

cd .\public
git init
git add .
git commit -m "update"
git remote add origin https://github.com/你的git账户/test.git
git push origin master:master

这样就把东西上传到github上了。

为了方便发布网页，可以写成一个脚本，然后每次发布只要右键选择git bash here后运行./deploy.sh就可以。

#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# build the project
hugo
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# push source to github
git push origin master:master

3、用Netlify渲染网页

最后我们用Netlify对托管到github上的静态网页进行渲染。很简单，可以看这篇教程。至此一个简陋的网页就建好了。记得改一下Netlify自动分配给你的域名，不过只能更改前缀。要求不高也还好了。
下面简单描述一下操作步骤：

用github的账号登陆Netlify。
点击右上角的Create new site
跳转到第一步，connect to git provider，选github
pick a repository，选择存放代码的仓库。
Build options and deploy。点击Deploying就ok了。
等待一会配置，就会出现网址了。类似这样的https://priceless-morse-029791.netlify.app。
复制粘贴网址就大功告成。

目前我们可以以网站形式来展示内容，但是初始化的见面一点也不cool啊。客官别急，请看下面进阶教程。

四、进阶

1、添加主题

首先我们可以到hugo主题库中找一个自己喜欢的主题。我比较喜欢的一个主题是academic，B站上还有人介绍Academic视频。由于大部分主题都已经有站点所需要的各种文件夹，所以不用自己再建站点。直接clone下来，把主题换成子模块的就行。快速入门的什么的可以忘记了^_^。

git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
cd My_Website
git submodule update --init --recursive

2、修改网页布局

我们可以根据academic文档进行修改，变成你自己喜欢的样式。这个academic帮助文档讲得很清楚，这里就不赘述。

不过这里提一下添加评论系统，这应该是一个刚需。要不然没有互动在那孤芳自赏？

由于academic主题设置commento很方便，这里图方便直接用了：

把config/_default/params.toml中的engine = 0改成engine = 2。
~~注册commento账号，把你自己博客域名进行绑定即可。~~ commento后来发现是收费的，现改成valine。
valine的加载有点麻烦，可以参考博客。
此外，国外用的比较多的有Disqus，国内有valine和Gittalk。不过Gitalk有点复杂，可参考这篇博客进行安装。

五、写作

1、图片管理

在md文档中插入的图片是一个麻烦事。一般来说有三种解决方案。如下所示

放置在static中

可以直接把图片放在static中，不过以后图片一多就麻烦了。如果后面想迁移什么的就太麻烦了。

利用page bundle

可以在post下面新建文件夹，重命名为你想要的博客名后新建md文件。这个md文档名称一定得是index.md，然后我们就可在同一目录下放置图片。md可以使用相对位置进行引用。

其实如果不是为了在有道云笔记中同时显示md文件中的图片，这种方式是最方便的，而且免费。

利用图床

这里利用picgo工具，把图片复制后，按一个快捷键就会自动上传到picgo内设置的图床上。

picgo教程支持8大图床。可以选免费的smms和github（虽然github慢了点），也可以氪金买云服务。

同时typora还支持picgo的插件，直接复制图片就可以实现上传到云端。不过配置可能会遇到些问题，可以参考这篇博客排坑。

综上，图床是最方便的，但需要点时间配置各个软件。page bundle是最简单的，但是如果没法移动到其它平台。

2、更新博客的流程

日后更新博客时就只需要在本地的hugo\content\post文件夹中编辑新的md文件，然后./deploy.sh就会自动编译静态网页然后上传至github，同时Netlify会检测Github中库的动态，并及时更新发布的网站内容。

3、在另一台电脑上写作

由于静态网页是托管到github，可以很方便地进行同步。直接用git pull把github拉下来就行，写完后git push 到仓库就万事大吉了。

以上就是免费创建个人静态网站地最佳实践。全免费，渲染快捷且可以专注写作，不用费心维护。

六、域名

最后为了装一下，怎么也得换个个性化的域名啊。网上到处看了看，感觉比较复杂。因为在国内买域名还得备案，听说很麻烦。后来直接到name.com购买了域名。

域名解析

可以参考这篇博客。值得注意的是：在你的域名购买商处管理DNS的时候，要加两条DNS。一条是没有www，一条是有www。

七、Debug

push error

git push academic master
remote: Permission to Feng-Zhang/academic-kickstart.git denied to xiaofeng007.
fatal: unable to access 'https://github.com/Feng-Zhang/academic-kickstart.git/': The requested URL returned error: 403

控制面板-用户帐户-凭据管理器-找到git:https://github.com-编辑
对这个凭据进行编辑，把要远程的账号和密码加上。

academic | 生信之家