title: Record the origin of the blog
date: 2020-07-02 15:11:24
tags: firebase
1 Introduction
This blog was created on July 2, 2020. It was built using the hexo blog framework + firebase hosting hosting host.
Because I also built a blog before, but at that time I used the vps+wordpress solution (unstable, data is easy to lose, and I have to rent a server to host the website myself). During this period of learning Linux, I accidentally discovered Google’s secondary firebase platform . (It is a *backend-as-a-service (BaaS)* platform owned by Google. Simply put, the backend is in the cloud, so you don’t have to worry about databases, authentication, storage, expansion, etc., just call it directly.)
At present, Firebase provides a lot of services, here we use the hosting .
The free hosting plan offers:
- 1G storage space
- After the 10G/month traffic is exceeded, it can be purchased for a fee.
In general, thanks to Google's cdn acceleration around the world, websites hosted on the firebase platform can be accessed at high speed for free (much faster than github pages)
Now that the blog is officially launched, it will record some of my learning records.
2. The code that the blog runs
hexo part
1. Install npm, Node.js
sudo apt update -y
sudo apt install -y nodejs nodejs-legacy npm
sudo apt-get install -y npm
2. Initialize folder
Execute the installation of the framework of the hexo blog in a blank directory
sudo hexo init
After the initialization is complete, there are the following file directories:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
Among them _config.ymlis the configuration file, sourcewhich stores all the articles. themesThe folder can be configured with different themes, and a large number of themes can be found on the official website.
3. Writing
When everything is ready, you can build the first article, under the hexo main directory
hexo new post <title>
An article will source/_postsbe generated under the folder, such as running
hexo new post 第一篇文章
You will find a file named in the above directory 第一篇文章.md, and then you can use markdown to write in it. It is recommended to use Typora as a writing tool for markdown
4. Generate static page html files
After writing, run the command in the root directory
hexo g
The articles and themes will be packaged together to generate HTMLfiles, and the generated files will be placed publicin the folder of the root directory. Everything the website needs to run is placed under this folder.
Also, it is possible to run
hexo server
This command will start the server locally, which can be used http://localhost:4000/to preview the effect.
It can be seen that the use of hexo is very simple. More detailed instructions can be found in the official documentation .
But here firebase is used as the hosting server, and there is no need to start the local server during actual operation, you can directly execute the command to submit the hexo blog to the firebase platform.
Complete submission:
firebase deploy
Commit only the changes:
firebase deploy --only hosting
The deployment is complete and the content will be deployed to the default hosting URL of the Firebase project: project-id.firebaseapp.com
In this way, you can see the modified results on my blog website: https://usg-cn.web.app/.
firebase part
Firebase , another artifact of Google, I won't introduce it in detail, we only use a small part of it: hosting.
Regarding hosting , the official introduction is as follows:
Firebase Hosting provides fast, secure static hosting for your web apps.
Firebase Hosting is a production-grade web content hosting service for developers. With Firebase Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network with just one command.
There are a number of very rare benefits to using Firebase:
- Global SSD CDN, faster than GitHub.
- One-click rollback. Firebase Hosting provides complete version control and management with one-click rollback.
- SSL with zero configuration, HTTPS automatically enabled.
- Perfect Chinese document support.
The experience of using Firebase is very good. Although it is a Google product, it provides a very complete Chinese document support, and the writing is very simple and easy to understand. The same code example provides versions of multiple programming languages, and many functions in it can be used quickly. .
1. Create a project
First visit Firebase to create a project.
Pay attention to the project ID when creating it . It will be used in the URL. If you don’t want to define the domain name yourself, you will always use this ID as the domain name access in the future. For example, the ID is usg-cn, then the domain name will be https://usg-cn.firebaseapp.com/and https://usg-cn.web.app/
2. Initialization
Run the following command to install Firebase (pre-installed Node.js):
npm install -g firebase-tools
Then run the following command to log in, and a browser window will pop up after running:
firebase login
After logging in, switch to the Hexo directory just generated,
cd hexo/
run
firebase init
When running, you will be asked to choose what function to use, because we have used hosting, so choose here Hosting, and then you will be prompted to choose a directory to use as the public root directory. This directory is where all static files are placed. By default public, the name is exactly the same as the static file directory name generated by Hexo , so there is no need to change it.
This command will create a configuration file in the project directory firebase.json, which can be used to customize hosting behavior.
run
Finally, after making all changes run
hexo g
This command will make Hexo generate publicfolders, because Firebase deploys public folders, so Hexo needs to be run first.
then run
firebase deploy
The deployment is complete and the content will be deployed to the default hosting URL of the Firebase project: project-id.firebaseapp.com
Now that you're done, it's time to enjoy your blog.
Common commands
hexo clean
hexo generate
hexo deploy
hexo cleanUsed to clear static files generated by old versions (public files pushed to the remote end)hexo generateGenerate a new static file (public file), which is generated based on/sourcethe content in the filehexo deploypush github deployment blog
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 newCreate a new article, the created article will be insource/_posts/the directory, the article format is .md (Markdown format), you can directly edit the blog and edit this file every time, or you can drag the written .md file directly to this in the folderhexo generateGenerate a static page, the generated files are allpublic/under the file, this file is the last file pushed to github
Blog address: https://usg-cn.web.app/
Reference address: https://hyrepo.com/tech/hexo-firebase-blog/