個性與張揚
前言
- 周末用了不到一天時間搭建了屬于自己的博客，欣喜之余，就想著提筆將個人博客搭建的詳細過程記錄下來，以便分享給眾讀者使用；
- 搭建之前，筆者看過其他博客的搭建教程，上面都提到可以在短短幾分鐘搭建好自己的博客。
- 從搭建到博客訪問確實只需要幾分鐘的時間，但幾分鐘的工作并未達到我們的預期，需要優化的時間可不止幾分鐘。遺憾的是，那些教程并沒有將博客優化過程可能遇到的坑提及出來。因此，本文有必要補充一下。
個人博客的好處
- 自由：我的地盤我做主，游戲的規則我來定，想想都很爽。文章的內容、格式、布局都可在自己的掌控范圍內，不收其他博客平臺的限制；
- 個性：現在提倡是創新，需要的是特色與個性，這樣才能突顯出自己的與眾不同。要學會打造屬于自己的品牌，分享自己對同一事物的不同看法。Ta,給了你展示個性的機會；
個人博客，走起
個人博客方案選擇
- 筆者選擇的是GitHubPages + Hexo+Next，一種簡單高效的實現方式，當然還有其他的實現方式，如：WordPress、GitHubPages + Jekell等等。
創建Github倉庫
- 在瀏覽器輸入Github網址;
- 登錄或者注冊；
- 點擊下圖所示的** New repository**:
創建倉庫
-
填寫倉庫名稱：注意 Respository name 中一定要輸入：你的用戶名.github.io,然后點擊”Create repository“ 按鈕完成創建即可。我嘗試過在這填寫過：不是用戶名.github.io,最終的后果是顯示404頁面。故，讀者在這略微留意一下。具體如下圖所示：
填寫倉庫名
本地環境的準備工作
- 筆者使用的是Mac系統，主要以Mac操作進行講解；
Git安裝
Nodejs安裝
- 兩種方式：其一去百度云下載一份直接安裝；其二去Nodejs官網下載。
- 說明：Nodejs也可使用Nodejs版本管理器nvm安裝，考慮其安裝過程中存在的問題較多，操作流程也多，筆者不推薦大家使用這種方式安裝。此處就不列舉其安裝方式。
Hexo安裝
- 打開終端，輸入Hexo的安裝命令：
npm install hexo-cli -g
若此命令安裝不成功時，可輸入下面的命令和開機密碼繼續完成安裝：
sudo npm install hexo-cli -g
- 打開終端，定位到你希望存儲博客的目錄下，如下所示：
鎖定存儲路徑
- 執行Hexo命令，初始化本地博客倉庫：
hexo init 你的用戶名.github.io // 盡量和Github倉庫使用同一個名稱
博客效果預覽
- 上述步驟完成后，基本的博客框架就已經搭建完了，Hexo安裝完成后默認使用landscape主題；
- 在終端定位到xxx.github.io文件夾下，并在終端輸入下面的命令就能啟動服務預覽功能；
hero s
操作步驟
- 在瀏覽器上輸入網址：http://localhost:4000/，就能預覽到landscape主題下的博客效果，具體如圖：
默認博客效果
- 如果你覺得這個主題很合心意，就可以默認使用這個主題，若不滿意，那就繼續向下看吧。
Next主題安裝
- Next主題是iissnan所創作的一個Hexo主題，以簡潔為主；
- 開始安裝主題之前，可以打開xxx.github.io文件，將此文件夾中的themes移除掉，當然你可以在安裝過程中直接替換掉；
- 安裝：在終端定位到xxx.github.io目錄下，執行下面的命令后，稍等片刻，主題就下載到對應的位置；
cd xxx.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next
主題下載后的目錄
博客的站點配置
-
站點配置文件：打開之前的xxx.github.io文件夾，找到_config.yml即為站點配置文件，選中該文件->右擊->打開方式->文本編輯（也可以選擇Sublime打開），打開后就可以修改基本的博客配置了；（注意一下：在配置文件里‘#’就是注釋符，相當于C語言中的‘//’）
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: 最晚的開始 #站點名稱 subtitle: 所有的為時已晚都是開始的最好時候 #副標題 #個人描述 description: My goal is not write code.if we could ship products and make all this money without writing any code,we could.Your job is ship products EXACTLY on time.It doesn’t matter whether you are a developer,tester,program manager,product manager whatever.Everybody’s job is the same. author: Jack_lin #作者 language: zh-Hans #語言 timezone: # 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 root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory #目錄不用修改 source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing # 文章布局、寫作格式的定義，不修改 new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format #時間格式不用修改 ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination #每頁顯示文章數，可以自行定義 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions #配置站點時，所使用的主題和插件，切換主題可以在這里設置 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # theme: landscape # 頭像， 在xxx.github.io/source 下相對路徑，若source文件夾下沒有uploads，就新建一個名為uploads文件夾，具體見下面截圖 avatar: /uploads/images/avatar.png # Deployment #這里是部署到Github上的設置 ## Docs: https://hexo.io/docs/deployment.html deploy: type: git #git提交 repo: https://github.com/123sunxiaolin/123sunxiaolin.github.io.git #已創建的Github倉庫 branch: master #提交到的分支
頭像設置目錄
- 配置好站點配置文件，就可以預覽一下博客的效果了，流程與前面的相同，即在終端定位到xxx.github.io文件夾，執行hexo s命令。
博客的Next主題配置
- 主題配置文件：需要與之前講過的站點配置文件進行區分，站點配置文件在xxx.github.io/_config.yml目錄；主題配置文件在xxx.github.io/themes/next/_config.yml目錄下；
- 關于主題可配置的選項略多，故采取分條講解的形式，具體如下：
1、設置關鍵字
# Set default keywords (Use a comma to separate)
keywords: “iOS, 程序猿, 文藝小青年” #修改
2、設置博客的開始時間
# Specify the date when the site was setup
#since: 2016 #設置博客的開始時間
3、菜單欄的設置
# ------------------------------------------------ ---------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu: #- 修改
home: / #在菜單上顯示首頁
archives: /archives //設置顯示歸檔
categories: /categories // 設置顯示分類
tags: /tags //設置顯示標簽
about: /about //設置顯示關于
#commonweal: /404.html
4、菜單欄的圖標設置：可從Font Awesome 網站查詢圖標對應的名稱填入到對應的菜單項即可
#設置菜單的圖標，規則為：菜單（左）：圖標名（右）
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
5、設置博客的外觀
# Schemes
#scheme: Muse #默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
#scheme: Mist #Muse 的緊湊版本，整潔有序的單欄外觀
scheme: Pisces #雙欄 Scheme，當然也是我選擇的
6、設置社交鏈接（設置了Github、微博）
# Social Links
# Key is the link label showing to end users.
social:
GitHub: https://github.com/123sunxiaolin
Weibo: http://weibo.com/JacklinIOS/profile?rightmod=1&wvr=6&mod=personinfo
#JianShu: http://www.lxweimin.com/users/ef991f6d241c/latest_articles
#設置社交鏈接對應的圖標
social_icons:
enable: true
# Icon Mappings. - 修改
KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
#JianShu: heartbeat
# Blogrolls -設置友情鏈接
links_title: Links
#links_layout: block
#links_layout: inline
links:
Jack_lin簡書: http://www.lxweimin.com/users/ef991f6d241c/latest_articles
設置后的效果圖
7、設置側欄的頭像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg #修改 - 側滑欄頭像，可參考站點配置文件中關于頭像的設置
- 注意一點使用next主題時，側欄頭像只能存儲在主題目錄下images文件夾里
8、設置側欄的方向（設置成左側）
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
9、設置博客中代碼高亮顯示
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
# highlight_theme: normal
# 代碼高亮主題
highlight_theme: night eighties
10、設置微信支付寶贊賞功能
# 打賞配置
# 打賞說明文本
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
# 微信收款二維碼
wechatpay: /uploads/images/wechat-reward-image.png
# 支付寶收款二維碼
alipay: /uploads/images/alipay-reward-image.png
11、設置微信公眾號訂閱
# Wechat Subscriber - 微信訂閱
wechat_subscriber:
enabled: true
qcode: /uploads/images/wechat-qcode.jpg
description: 歡迎您掃一掃上面的微信公眾號，訂閱我的博客！
贊賞和微信訂閱效果
12、添加網頁計數器-不蒜子
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:
創建分類界面
- 打開終端，定位到xxx.github.io目錄下；
- 執行下面的命令，新建一個名為categories的頁面；
hexo new page categories
-
創建完成后，在對應的目錄下找到index.md文件，進行如下的修改：
--- title: categories date: 2016-08-20 22:17:49 type: "categories" # 將頁面的類型設置為 categories,主題將自動為這個頁面顯示所有分類 comments: false ---
設置后的效果
創建標簽界面
- 打開終端，定位到xxx.github.io目錄下；
- 執行下面的命令，新建一個名為tags的頁面；
hexo new page tags
-
創建完成后，在對應的目錄下找到index.md文件，進行如下的修改：
--- title: tags date: 2016-08-20 22:17:49 type: "tags" # 將頁面的類型設置為 tags,主題將自動為這個頁面顯示為標簽云 comments: false --- 上述創建的分類和標簽界面是主題自動維護的，用戶只需要按照規則書寫文章即可。
如何寫和發布博客
主要使用的Markdown語法寫文章，推薦Mac上使用Mou編輯軟件，可帶查看其語法幫助；
-
在文章開頭需要添加一些配置，如下：
--- title: 個人博客搭建詳解（Windows和Mac通用版） # 這是標題 categories: # 這里寫的分類會自動匯集到 categories 頁面上，分類可以多級 - 博客站教程 - 個人博客書寫 tags: # 這里寫的標簽會自動匯集到 tags 頁面上 - 專業 - 自由 --- 添加好上述配置后，就可以安心寫文章了。最后，將寫好的文章放到xxx.github.io/source/_post目錄下；
然后，就可在本地進行測試。在終端上定位到xxx.github.io目錄下，執行 hexo s命令，后在瀏覽器輸入http://localhost:4000/即可看到博客的效果。
可在終端輸入下面的命令完成安裝自動部署發布工具：
sudo npm install hexo-deployer-git --save
-
發布到GithubPages
當在本地確認博客效果后，就可以將md文件生成靜態網頁上傳至GithubPages，在終端定位到xxx.github.io目錄下，執行下面的命令即可：
hexo clean #清楚網頁緩存
hexo g #生成靜態網頁
hexo d #開始部署
//當然也可以使用一次性命令：
hexo clean && hexo g && hexo d
注意：首次部署時，終端會讓你輸入Github的用戶名和密碼，按照要求填寫后，稍等幾分鐘，就可以完后部署。
最后一步
- 在瀏覽器上輸入http://xxx.github.io就可以看到屬于你的博客了。是不是很激動，那就趕緊行動吧！
以上內容是筆者在創建個人博客過程中一些做法，大家如有其它意見歡迎評論。
