天天看点

基于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或者打开浏览器输入

就能访问我们刚刚上传的网站了。

至此网站就部署完毕啦,你可以把它修改成你想要的任何样子哦,当然前提你需要会写一些前端代码。

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

继续阅读