基于Firebase搭建酷炫的博客

,---
title: 基于Firebase搭建酷炫的博客
date: 2016-12-15 20:41:24
tags: Firebase

---

Let`s do it.

效果：

1. https://futaosmile-95.firebaseapp.com/
2. https://futaosmile-479f5.firebaseapp.com/
   官方链接
   官方帮助文档

步骤

Step 1

安装Node.js与npm(Node Package Manager)。(npm会随Node.js自动安装,安装过程请百度)

Step 2

打开cmd(不要使用Git Bash,很多东西出不来，我吃过的苦头大家就别再吃了。)，执行 npm install -g firebase-tools 如果执行失败，请检查node.js是否安装正确。安装完成后，执行 firebase login，用以授权部署网站到你的firebase项目下的权限给当前命令行环境。

Firebase Login

如果授权成功则提示:

Success

Step 3

创建项目(项目名既是你的博客地址)

项目名格式一定是 aaa-bbb 个人建议项目命名时添加一个-，因为如果不添加的话之后生成链接的时候Firebase会自动给你的地址加上一写奇怪的代码，就像我之前的项目名是futaosmile，但是给出来的链接是futaosmile-479f5。所以为了避免这种情况的发生，建议项目名中间加上-。

创建项目

Step 4

在电脑上创建一个文件夹用于保存项目。建议与项目名同名，比较好记。
之后通过cmd进入该文件夹，并执行 firebase init进行初始化。

firebase init

选择你的项目

项目列表

Step 5

网站部署
这里我们就不自己写一个博客网站了，我们从http://getmdl.io/templates/index.html 上下载一个模板。
下载完后把压缩包解压，把里面所有的文件都拷贝出来，放到上一步生成的public目录下。
你可以执行firebase serve在本地查看网站的状态，如果觉得满意了就可以通过firebase deploy部署了。
最后一步，执行firebase deploy，网站就成功上线了。

Step 6

你可以通过执行firebase open或者打开浏览器输入https://futaosmile-95.firebaseapp.com/ 就能访问我们刚刚上传的网站了。
至此网站就部署完毕啦，你可以把它修改成你想要的任何样子哦，当然前提你需要会写一些前端代码。

写的很匆忙，比较粗糙，凑活看吧。不理解的地方可以联系我或者百度，如果有遗漏的大问题之后再补充，谢谢。