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

目录

一、前言

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

  1. 首先你得在本地生成静态网页文件。这里推荐用hugo或hexo。
  2. 然后把静态网页文件托管到github仓库。这里推荐使用git和gitlab工具。
  3. 把远程的静态网页文件进行渲染,形成让大家可根据网址直接阅览的网页。可用github page和Netlify.
  4. 找到有道云笔记的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自动分配给你的域名,不过只能更改前缀。要求不高也还好了。
下面简单描述一下操作步骤:

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

目前我们可以以网站形式来展示内容,但是初始化的见面一点也不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很方便,这里图方便直接用了:

  1. 把config/_default/params.toml中的engine = 0改成engine = 2
  2. 注册commento账号,把你自己博客域名进行绑定即可。 commento后来发现是收费的,现改成valine。
  3. 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。

image-20200526113018470

七、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-编辑
对这个凭据进行编辑,把要远程的账号和密码加上。

image-20200526130114714