點擊上方 "大前端圈"關注, 星標或置頂一起成長
每天早晨08點30分, 第一時間與你相約
Introduction
回顧一下我三年搭建博客的歷程，最初是選擇wordpress，Wordpress全部由php編寫，數組庫採用MySQL。優點：用戶只需要將Wordpress的源代碼複製到網站根目錄下，然後訪問網站，之後的安裝操作全部在瀏覽器上完成。即使不是軟件行業的人，也可以在幾分鐘之內完成安裝工作。甚至很多虛擬主機供應商都提供了Wordpress的一鍵式安裝工具。用戶連上傳文件的步驟都省了。缺點：項目太臃腫了，Wordpress耗損CPU嚴重，不容易操作，運行稍慢。尤其是後期文章數目較多的時候，想要登陸下網站的管理後臺，心態簡直是抓狂的。loading了好久，有時候還會失敗，發一篇文章也很費勁，索性就不維護了。後來在github網站上找到一個vue模板：github地址和demo預覽二次開發了一下，的確是實現了很多功能，也挺輕便的，樣式也可以自定義，博客可以直接寫在github的issue，很方便，用了三個月後才發現百度的搜索引擎居然只收錄了首頁，搜索引擎的基礎爬蟲的原理就是抓取你的url，然後獲取你的html源代碼並解析。而你的頁面通常用了vue等js的數據綁定機制來展示頁面數據，爬蟲獲取到的html是你的模型頁面而不是最終數據的渲染頁面，所以說用js來渲染數據對seo並不友好。而且github api在國內訪問速度也沒有想象中那麼快，可能是github的CDN被牆屏了。使用github.io可以搭建一個自己的博客,把靜態文件項目託管到github上,可以寫博客,可以使用markdown語法,也可以展示作品.靈活性高.但是有較大的難度,但是這對於一個熟悉git操作的前端開發工程師來說，都不算什麼的。重點是hexo和github.io的域名和服務器都是免費的。當然也可以選擇用自己的服務器和域名。
### Quick Start #### 安裝 node,git，註冊好github賬號 (網站有很多教程，安裝方法這裏就不詳細展開了，注意:github賬號用戶名一定不能有大寫.)
#### 安裝hexo:npm install-g hexo
創建hexo文件夾:
cmd窗口切換到對應的目錄下,然後執行: hexo init也可以在 E:\hexo 下右鍵,選擇git bash,在窗口中執行 hexo init自動安裝了需要的文件.
安裝依賴:
繼續執行: npm install
完成本地安裝:
繼續在 E:\hexo 下執行: hexo generate
繼續執行: hexo server
然後在打開瀏覽器 localhost:4000 ,就可以看到,本地已經安裝好了.
在github上創建博客倉庫:
創建SSH keys
監測是否有已經存在的SSH keys:
打開 git bash 終端(可以在 E:\hexo 下右鍵打開,也可以直接在開始菜單裏打開)
執行: $ ls-al~/.ssh
如果沒有的話,就生成一個SSH keys: 寫自己的郵箱
$ ssh-keygen-t rsa-C"[email protected]"
然後會出現:
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/you/.ssh/id_rsa):
就是讓你輸入SSH keys要保存在哪裏,一般不用改,就直接回車就好了.輸入一個密碼,這個密碼後面會用到,所以要記住咯
保存SSH keys:
創建成功後,他會提示你SSH keys保存在哪裏:
Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db [email protected]
找到SSH keys:
根據上一步裏告訴你的路徑,找到保存SSH keys的地方,我的是在 C:\Users\2000104591.ssh
其中 id_rsa.pub 就是SSH keys 如果爲了防止以後找不到,可以把他們自己另存到其它地方
爲github倉庫添加SSH keys
然後把創建的id_rsa.pub裏的內容複製到Key裏去,Title部分隨便填. 點擊'Add key'
添加的過程中,還要再輸入一次github的密碼
配置_config.yml文件併發布:
在 E:\hexo(文件根目錄下) 下,有一個文件叫 _config.yml ,打開它,拉到最底下,做如下修改:
然後再執行:
hexo generate
hexo deploy
然後訪問: https://ye63.github.io/ (用戶名改成自己的),就可以看到了.
快捷命令
hexo 新建一篇文章給它添加分類和標籤:
hexo new "移動端限制input框只能輸入數字"
通過mou編輯器打開：添加tags和categories
---
title: title #文章標題
date: 2016-06-01 23:47:44 #文章生成時間
categories: "Hexo教程" #文章分類目錄 可以省略
tags: #文章標籤 可以省略
- 標籤1
- 標籤2
description: #你對本頁的描述 可以省略
---
發佈
hexo clean && hexo g && hexo d
創建新頁面
hexo new page "about"
點擊閱讀全文查看hexo博客效果
推薦閱讀
女程序媛爲什麼 Bug 多？
再見，VPN ！
張一鳴：爲什麼 BAT 挖不走我們的人才？
一二線城市知名IT互聯網公司名單，你知道幾家！
微信號 可以改了 ！！！真事 ！！
公衆號對話框，回覆關鍵字 “1024”
免費領取程序員賺錢實操教程
- 長按識別關注 -
技術，職場，產品，思維
行業觀察
嘿，你在看嗎？
