免费自建一个酷炫的博客

作者: CPPAlien | 来源:发表于2016-04-17 22:37 被阅读1882次

    前言

    先看下我们搭建的博客的最终效果: 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/ 的域名,点击后就可以看到我们刚刚搭建的博客啦。

    相关文章

      网友评论

      • yarving:这个博客运行在你自己的电脑上?
      • 大华日记:看着折腾的时候听好玩,没一点实用性。
      • 侯爷:google字体,加载了很久。
        CPPAlien:@侯爷 哦,我上网一直是翻墙状态,所以没注意到
      • 布客飞龙:页面加载挺快的,你是不是用了什么被墙的公共库导致变慢了?
      • 小時間光:博主你的服务器开了吗?打不开。
      • 左蓝:不符合“国情”,还不如hexo来得快。
      • CrazyGod:访问速度太慢了。。

      本文标题:免费自建一个酷炫的博客

      本文链接:https://www.haomeiwen.com/subject/rryolttx.html