Hexo+GitHub生成我的博客

前言

本篇文章記錄一下我生成我的博客的過程。順便分享給有須要的人。

若是您須要開發我的博客，須要：

• 最基礎的前端知識就行。
• 用markdown的語法來寫文章。
• 有GitHub帳號。
• 安裝好了Git和node
• 知道npm操做。

什麼是Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

hexo 正常來講，不須要部署到咱們的服務器上，咱們的服務器上保存的，實際上是基於在hexo經過markdown編寫的文章，而後hexo幫咱們生成靜態的html頁面，而後，將生成的html上傳到咱們的服務器（或者是GitHub上）。簡而言之：hexo是個靜態頁面生成、上傳的工具。

安裝Hexo

$ npm install hexo-cli -g //全局安裝hexo
$ hexo init blog //對blog文件夾初始化(這一步會很慢)
$ npm install //安裝所須要的組件
$ hexo g //編譯生成靜態頁面
$ hexo s //啓動本地服務
複製代碼

啓動本地服務以後，根據終端的提示打開http://localhost:4000/能夠在本地查看到博客。以下圖所示。

綁定GitHub

上一步在本地查看到了博客，若是別人想經過在瀏覽器輸入地址來訪問你的博客怎麼辦？

讓你的Hexo與GitHub倉庫綁定。這樣別人就能夠訪問了。

獲取本機SSH口令

ssh keys就是用來使本地git 項目與github聯繫。

• 提交過代碼到GitHub上的同窗表明着已經讓git倉庫綁定到了GitHub上了。就沒必要再配置SSH 口令了。

• 若是沒有綁定的話。

  • $ ssh-keygen -t rsa -C "郵件地址@youremail.com" //ssh-keygen -t rsa -C "Github的註冊郵箱地址"
  • 提示Enter passphrase (empty for no passphrase):設置密碼
  • Enter same passphrase again 再次輸入
  • Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.表明設置成功。
  • 找到id_rsa.pub文件，複製裏面全部內容。
  • 來到GitHub主頁面，路徑爲Settings/SSH and GPG keys/New SSH key。
  • Title: blog //不必定非要是blog
  • key: 複製的內容
  • Add SSH key 完成SSH key 的綁定。

• 最後還要這一步。

$git config --global user.name "你的名字"
$git config --global user.email "你的郵箱"
複製代碼

Git還不清楚的同窗能夠戳Git筆記

建立新倉庫

• 平時咱們建立倉庫會直接寫你要建立的倉庫名就OK。好比建一個Node的倉庫直接填Node就好了。 可是，博客的倉庫地址不同，必須爲你的GitHub名+ github.io 。好比個人博客倉庫名就叫作zhongjunhaoz.github.io。必須按照此種格式去填寫。

blog文件的基本配置

• 配置_config.yml文件。

title: **My Blog** #博客名
subtitle: to be continued... #副標題
description: My blog #給搜索引擎看的，對網站的描述，能夠自定義
author: **Yourname** #做者，在博客底部能夠看到
email: yourname@yourmail.com #你的聯繫郵箱
language: **zh-CN** #中文。若是不填則默認英文
timezone: Asia/Shanghai
# URL #這項暫不配置，綁定域名後，欲建立sitemap.xml須要配置該項
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
# Writing 文章佈局、寫做格式的定義，不修改
# Archives 默認值爲2，這裏都修改成1，相應頁面就只會列出標題，而非全文
# Server 不修改
# Date / Time format 日期格式，能夠修改爲本身喜歡的格式
# Pagination 每頁顯示文章數，能夠自定義，貼主設置的是10

複製代碼

• 配置_config.yml文件下的Deploy

deploy:
  type: git
  repository: 你的倉庫地址
  name: GitHub名
  email: 郵箱
  branch: master
複製代碼

• 安裝插件 npm install hexo-deployer-git --save
• 準備上傳到github倉庫。

- hexo clean //清除以前的緩存
- hexo g  // 生成靜態文件
- hexo d  //上傳至倉庫
複製代碼

• 接着在瀏覽器輸入你的GitHub名+ github.io就能夠訪問你的我的博客了。
• zhongjunhaoz.github.io/ 這是個人我的博客。

配置主題

原生的博客主題有點醜，咱們能夠選擇本身喜歡的主題添加到本身的博客中。

• 官方主題庫：主題
• 在這裏我選擇的是：閃爍之狐。裏面有對更改主題配置的文檔。

經常使用命令

首次安裝可能須要

npm install hexo -g #全局安裝 
npm update hexo -g #升級 
hexo init #初始化
複製代碼

寫博客最經常使用

hexo n "個人博客" == hexo new "個人博客" #新建文章
hexo g == hexo generate #生成靜態Html
hexo s == hexo server #會監視文件變更並自動更新，您無須重啓服務器
hexo d == hexo deploy #部署
複製代碼

服務器

hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定義 IP
hexo server -s #靜態模式
hexo clean #清除緩存 網頁正常狀況下能夠忽略此條命令
複製代碼

監視文件變更

hexo generate --watch  #監視文件變更
複製代碼

草稿

hexo publish [layout] <title>
複製代碼

網站效果

歡迎訪問個人博客，會分享一些技術文章，一塊兒學習前端。

參考文章

hexo經常使用命令筆記