免费自建一个酷炫的博客

前言

先看下我们搭建的博客的最终效果： http://firebase.tech/
本篇所介绍的搭建博客是基于firebase项目的，所以你需要对firebase有那么一丁点了解，知道如何创建一个firebase项目就行。如果不了解，可以参考一下《Firebase快速集成》。为了搭建我们的网站，你还需要在你的系统上搭建一个node.js的环境，搭建方法也非常简单，你可以参考下这篇《node.js安装教程》。以下我们就基于《快速集成》中创建的fire-weather项目来搭建一个网站吧。

依赖安装

首先需要安装firebase-tools，打开命令行工具执行npm install -g firebase-tools,如果在linux环境下，你可能需要加sudo，如果执行失败，请检查node.js是否安装正确。安装完成后，执行 firebase login，用以授权部署网站到你的firebase项目下的权限给当前命令行环境。

授权页面

授权成功后你就能看到如下提示

E:\UbuntuShare\mdl-template-blog>firebase login
Visit this URL on any device to log in:
https://www.firebase.com/login/confirm.html?ticket=daeee36e-0250-4a0d-8319-95f31
3c42d72

Waiting for authentication...

+  Success! Logged in as xxx@gmail.com

环境准备

创建一个空目录，在此目录下打开命令行工具，执行firebase init，执行后，命令会询问你两个问题，第一个是你要选择哪个firebase上的项目作为当前目录下网站的宿主，第二个问题是设定一个用来保存网站静态文件（*.html、 *.css、 *.js等）的目录名称。

项目选择

对第二个问题，我们用默认的“public”名作为目录。

目录选择

执行成功后，你会看到当前目录下生成一个叫public的目录和一个firebase.json，firebase.json里面包含一些环境的基本信息。

{
  "firebase": "fire-weather",
  "public": "public",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

网站部署

这里我们就不自己写一个博客网站了，我们从
http://getmdl.io/templates/index.html 上下载一个模板。

下载模板

下载完后把压缩包解压，把里面所有的文件都拷贝出来，放到上一步生成的public目录下。

最后一步，执行firebase deploy，网站就成功上线了。

部署成功

你可以通过执行firebase open或者打开浏览器输入
https://fire-weather.firebaseapp.com/ 就能访问我们刚刚上传的网站了。

网站

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

设置自己的域名

域名可以去 https://godaddy.com 上买一个自己喜欢的，性价比还不错，关键你还无需备案就可以直接访问。买完域名后，进入域名设置，然后设置301跳转

域名设置

设置成功后，你就可以通过自己的域名来访问网站啦。这里我买了一个 http://firebase.tech/ 的域名，点击后就可以看到我们刚刚搭建的博客啦。