点击蓝色字关注我们!
一个努力中的公众号
长的好看的人都关注了
之前就一直有人问我,“博主啊,你的博客是怎么搭建的?能不能出一个教程呢?”
每次我都是将我所用的关键技术告诉他,按道理将这些搭建博客的技术网上的文章应该有很多很多了。但是我还是打算自己写一下教程,方便更多的人来进行学习和搭建博客的使用。
Hugo
目前,我的博客由之前的 Hexo 迁移到 Hugo,Hugo 无论是安装,配置还是部署个人感觉都比 Hexo 方便太多了。Hugo 的安装仅仅需要一个安装包。可以在 Github[1] 上找到你的对应版本,进行安装。
Hugo 是有 Go 语言写的,从 markdown 渲染 html 的速度很快。自称为 世界上渲染网站最快的框架。另外 Hugo 也有很多的主题[2],可以供我们选择。
安装
安装完记得将 Hugo 添加到环境变量中。在终端进行 hugo version
进行验证是否安装正确。
是的,安装就是如此的简单,官方提供了其他安装方式,你可以选择官方[3]提供的方式。
建站
通过 Hugo 的命令我们可以快速生成我们的网站。你可以选择你喜欢的地方来执行下面的命令。
hugo new website your_website_name
这样就建立了新的站点。
此时我们的新站点无法启动。需要安装主题,你可以选择你喜欢的主题。
这里我随便搜索了一个主题进行安装。
cd themes
git clone https://github.com/vividvilla/ezhil.git
安装完成后,在根目录中 config.toml
进行配置,填写主题名称。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ezhil"
在根目录下使用 hugo server
进行项目启动。
![](https://i-blog.csdnimg.cn/blog_migrate/abeac486d93745ad1ecbd9a19157aa81.png)
此时我们的网站已经启动,可以看到我们的页面。
新建文章
我们执行 hugo new posts/Hello.md
我们将文章统一存放到 posts 目录下。posts 目录会新建到 content 目录下。
对 Hello.md 进行编辑。
---
title: "Hello"
date: 2019-10-12T22:15:50+08:00
draft: true
---
# Hello Hugo
这是 Hugo 的第一篇文章。
其中有着 draft
选项。当 draft
为 true
的时候,默认是不会渲染的。我们可以将 draft
改为 false
,或者在渲染启动时候添加参数 hugo server -D
就会渲染。
![](https://i-blog.csdnimg.cn/blog_migrate/10ad6ee49ad5885fd7353a3917f36bbc.png)
这样我们就已经安装完成了 Hugo。更多的主题配置可以参考当前主题的 themes/${name}/exampleSite/config.toml
。
生成静态页面
在项目根目录下直接使用 hugo
命令,会生成 public 目录,该目录下都是关于我们的 markdown 编译完成的 html 静态页面。
部署
博客已经安装完成,并且本地已经测试完成,文章也已经写好了。那么就该部署了。
部署到哪里呢?
之前我喜欢放到 Git Page ,但是我发现了更好的地方 Firebase。Firebase 上有 Hosting,每个月都有免费的流量和空间使用,对于个人来说,足够使用了,并且可以配置个人域名等,版本控制。
使用 Firebase 是稍微有点门槛的,大陆无(ti)法(zi)直接使用。
建立 Firebase 项目
首先登录 firebase 官网[4],登录账号后新建一个项目。
![](https://i-blog.csdnimg.cn/blog_migrate/c0aad2d85863b5cb9eba8bcd9ab67cda.png)
Firebase CLI 安装
首先确保本地有 node.js[5] 环境。设置终端代理。
set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080
set http_proxy_user=user
set http_proxy_pass=pass
set https_proxy_user=user
set https_proxy_pass=pass
设置完代理之后就可以安装我们的 cli 了。
通过 npm 进行安装 npm install -g firebase-tools
这样就完成了安装。
安装完成后首先是登录。firebase login
进行登录,会打开浏览器进行授权。这个过程使用全局代理,否则有可能无法验证通过。
![](https://i-blog.csdnimg.cn/blog_migrate/537194b1ba8d8cf6ce8d8742f829126f.png)
在项目的根目录下执行 firebase init
。选择 Hosting,通过空格进行确认。
![](https://i-blog.csdnimg.cn/blog_migrate/6f7c56cbc418ef9c12e03e760d40cea2.jpeg)
之后选择 Use an existing project。从项目列表里找到我们刚刚创建的项目。回车
继续。下一步是询问是否使用 public 目录。这里直接回车就好。因为 public 目录就是我们要进行部署的文件。
是否要重写 index.html ,这里可以选择不重写。
这样我们的项目就已经安装创建完成。
![](https://i-blog.csdnimg.cn/blog_migrate/8b04880a5310cdcd784e473be805e803.jpeg)
完成了创建,那么下一步就是要部署。
部署到 firebase 上
通过命令 firebase deploy 就可以将我们的编译后的网页部署到 firebase 上去。
执行完成后下方会告诉我们项目控制台的地址和项目地址,我们可以打开项目地址进行项目的查看。
![](https://i-blog.csdnimg.cn/blog_migrate/0e4540faec850c2e58555eb350abce6c.jpeg)
但是,当我们打开项目的时候,发现上面没有样式。通过浏览器控制台可以看到样式文件并没有被请求到。
这里需要我们手动设置一下。
打开项目的 config.toml 文件,第一行的 baseURL
进行修改,将它修改为我们 firebase 给的网站地址。
重新进行 hugo
和 firebase deploy
。刷新页面后,可以看到我们的网站已经有了样式,重新部署到 firebase 上了。
集成 CI/CD
话说,每次写完文章都要来一串命令,很费事,也容易出错。所以我们可以集成 CI/CD 来进行部署。
这里我选择了 Gitlab 自带的 CI/CD 功能。方便快捷。
通过命令 firebase login:ci 进行重新登录授权,此时授权完成之后就会在终端上出现一行 token。
请把 token 保存好。
在项目根目录建立 ci/cd 执行文件,命名为 .gitlab-ci.yml
。粘贴下面的代码。
image: nohitme/hugo-firebase
before_script:
- hugo version
- firebase --version
hugo_firebase:
stage: deploy
only:
- master
except:
- dev
script:
- rm -rf public
- hugo
- firebase deploy --token ${FIREBASE_TOKEN}
将项目上传到 gitlab 上。打开项目设置,找到 CI/CD 目录。在 Key 的位置填入 FIREBASE_TOKEN ,在 Valeu 中填入我们刚刚记下的 Token,并保存。
![](https://i-blog.csdnimg.cn/blog_migrate/bb123e42be704066d3fe4919e8bc6bd2.jpeg)
当这些完成后,选择 CI/CD 目录,点击 Run Pipeline 进行重新运行。
等待运行完成之后,项目就会自动部署到 Firebase 了。
从此以后,我们只需要负责写文章就好,编译,部署都提交到 gitlab 服务器上进行。
总结
基本的 Hugo 如何建立一个网站,如何部署的教程已经完成。不同的主题设置不同,比如评论,阅读统计等,这些可以参考你选择的主题中的说明进行。
祝你也可以有一个自己的博客。
文章链接
[1]
Github: https://github.com/gohugoio/hugo/releases
[2]主题: https://themes.gohugo.io/
[3]官方: https://gohugo.io/getting-started/quick-start/
[4]firebase 官网: https://console.firebase.google.com
[5]node.js: https://nodejs.org/zh-cn/