1.前言

这个博客是于2020年7月2日创建的。使用的是hexo博客框架+firebase hosting 托管主机建立的。

img

因为之前自己也搭建过博客，但当时使用的是vps+wordpress的方案（不稳定，数据容易丢，而且要租用服务器自己托管网站）这段时间学习Linux的过程中偶然发现了谷歌的副firebase平台（它是谷歌旗下一个后端即服务(BaaS)的平台，简单来说就是后端在云端，不用再担心数据库、认证、存储和扩张等，直接调用即可。）

img

目前Firebase提供了非常多的服务，这里我们用到了其中的托管。

免费的托管方案提供了：

  • 1G的储存空间
  • 10G/月的流量超出后可以付费购买。

总的来说得益于Google在世界各地的cdn加速，使得在firebase平台托管的网站能够免费地高速访问（比github pages快多了）

现在博客正式上线了，这将记录我的一些学习记录。

2.博客运行的代码

hexo部分

1.安装npm、Node.js

1
2
3
sudo apt update -y
sudo apt install -y nodejs nodejs-legacy npm
sudo apt-get install -y npm

2.初始化文件夹

在一个空白的目录执行安装hexo博客的框架

1
sudo hexo init

初始化完成后，就有了如下的文件目录：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml为配置文件，source里存放所有的文章，themes文件夹可以配置不同的主题，大量的主题可以在官网上找到。

3.写作

当一切准备就绪之后就可以兴建第一篇文章了，在hexo主目录下

1
hexo new post <title>

就会在source/_posts文件夹下生成一篇文章，比如运行了

1
hexo new post 第一篇文章

就会在上述目录下找到一个名为第一篇文章.md的文件，然后就可以在里面用markdown写作了。这里推荐使用Typora作为markdown的写作工具

4.生成静态页面html文件

写作完成后，在根目录运行命令

1
hexo g

就会将文章和主题打包在一起生成HTML文件，生成的文件会放在根目录的public文件夹下。网站运行所需的所有东西全都被放在这个文件夹下。

同时，也可以运行

1
hexo server

这个命令会在本地启动服务器，可以通过http://localhost:4000/来预览效果。

可以看到hexo的使用非常简单。更多详细的说明可以查看官方文档。

但是我这里firebase作为托管服务器，实际运行的时候无需启动本地服务器可以直接执行命令把hexo博客提交到firebase平台。

完整提交内容：

1
firebase deploy

只提交更改内容：

1
firebase deploy --only hosting

部署就完成了，内容将部署至 Firebase项目的默认托管网址：project-id.firebaseapp.com

这样在我的博客网站：https://usg-cn.web.app/ 就可以看到修改后的结果了。

firebase部分

Firebase ，谷歌的又一个神器，具体怎么神我就不多作介绍了，我们只用上了其中很小的一部分功能：托管。

img

关于托管，官方是这样介绍的：

Firebase 托管为您的网页应用提供快速、安全的静态托管。
Firebase 托管是为开发者提供的生产级网页内容托管服务。 借助 Firebase 托管，您只需一条命令，便可轻松快捷地将网页应用和静态内容部署到全球内容分发网络。

使用Firebase有很多非常难得的好处：

  • 全球SSD CDN，速度比GitHub快。
  • 一键回滚。Firebase托管使用一键式回滚提供完整的版本控制和管理。
  • 零配置的SSL，自动启动HTTPS。
  • 完美的中文文档支持。

使用Firebase的体验非常好，虽然是谷歌的产品但是提供了非常完整的中文文档支持，而且写得非常简单易懂，同一个代码示例提供多种编程语言的版本，里面的很多功能都能快速上手。

1.创建项目

首先访问Firebase创建一个项目。

创建时项目ID要注意，它会被用在URL上，如果不想自己定义域名的话以后就会一直用这个ID来作为域名访问。比如ID是usg-cn，那么域名就会是https://usg-cn.firebaseapp.com/ 和 https://usg-cn.web.app/

2.初始化

运行以下命令来安装Firebase（需预先安装Node.js）:

1
npm install -g firebase-tools

然后运行以下命令来登录，运行完后会弹出一个浏览器窗口：

1
firebase login

登录后再切换到刚才生成的Hexo目录下，

cd hexo/

运行

1
firebase init

运行时会让选择要使用什么功能，因为我们使用过的是托管所以这里选择Hosting，然后会提示选择一个用作公共根目录的目录。这个目录就是放所有静态文件的地方，默认为public，名字刚好和Hexo生成的静态文件目录名字一样，所以无需更改。

这个命令会在项目目录下创建一个firebase.json配置文件，可以通过它来自定义托管行为。

运行

最后，完全所有改动后运行

1
hexo g

这个命令会让Hexo生成public文件夹，因为Firebase部署的就是public文件夹，所以要先运行Hexo。

然后运行

1
firebase deploy

部署就完成了，内容将部署至 Firebase项目的默认托管网址：project-id.firebaseapp.com

大功告成了，接下来就是欣赏博客的时候了。

常用命令

1
2
3
hexo clean
hexo generate
hexo deploy
  • hexo clean用于清除旧版本生成的静态文件（推送到远端的public文件）
  • hexo generate生成新的静态文件（public文件），生成这个文件是根据/source文件中的内容生成
  • hexo deploy推送github部署博客
1
2
3
4
5
6
7
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy # 将静态博客页面部署到GitHub
hexo help  # 查看帮助
hexo version  # 查看Hexo的版本
  • hexo new创建新的文章，创建的文章会在source/_posts/目录下，文章格式.md（Markdown格式），每次就可以直接编辑博客直接编辑这个文件就可以了，也可以把写好.md的文件直接拖到这个文件夹中
  • hexo generate生成静态页面，生成的文件都是在public/文件下，这个文件就是最后推送到github的文件

短命令

在ubuntu的环境下可以使用短命令来执行一键将静态博客页面部署到firebase

首先打开你个人目录下的.bashrc隐藏文件

1
vim ~/.bashrc

把光标移到末尾按’i’键插入一行

1
alias gkd='hexo clean && hexo g && firebase deploy'

ubuntu

‘gkd’（搞快点）就是短命令名，每当输入’gkd’将自动执行

1
2
3
hexo clean
hexo g
firebase deploy

部署三连

然后按’Esc’后按’:wq’保存退出

最后在终端输入命令生效刚刚的更改就完事了

1
source ~/.bashrc

这样就以后写blog就可以节省掉’部署三连’的时间了

拓展：

1
alias gql='hexo g && firebase deploy --only hosting'

只执行构建和只部署更改

执行source ~/.bashrc生效更改后要重启终端才会生效

  • 一键三连