前言
- 周末用了不到一天時(shí)間搭建了屬于自己的博客,欣喜之余,就想著提筆將個(gè)人博客搭建的詳細(xì)過(guò)程記錄下來(lái),以便分享給眾讀者使用;
- 搭建之前,筆者看過(guò)其他博客的搭建教程,上面都提到可以在短短幾分鐘搭建好自己的博客。
- 從搭建到博客訪問(wèn)確實(shí)只需要幾分鐘的時(shí)間,但幾分鐘的工作并未達(dá)到我們的預(yù)期,需要優(yōu)化的時(shí)間可不止幾分鐘。遺憾的是,那些教程并沒(méi)有將博客優(yōu)化過(guò)程可能遇到的坑提及出來(lái)。因此,本文有必要補(bǔ)充一下。
個(gè)人博客的好處
- 自由:我的地盤(pán)我做主,游戲的規(guī)則我來(lái)定,想想都很爽。文章的內(nèi)容、格式、布局都可在自己的掌控范圍內(nèi),不收其他博客平臺(tái)的限制;
- 個(gè)性:現(xiàn)在提倡是創(chuàng)新,需要的是特色與個(gè)性,這樣才能突顯出自己的與眾不同。要學(xué)會(huì)打造屬于自己的品牌,分享自己對(duì)同一事物的不同看法。Ta,給了你展示個(gè)性的機(jī)會(huì);
個(gè)人博客,走起
個(gè)人博客方案選擇
- 筆者選擇的是GitHubPages + Hexo+Next,一種簡(jiǎn)單高效的實(shí)現(xiàn)方式,當(dāng)然還有其他的實(shí)現(xiàn)方式,如:WordPress、GitHubPages + Jekell等等。
創(chuàng)建Github倉(cāng)庫(kù)
- 在瀏覽器輸入Github網(wǎng)址;
- 登錄或者注冊(cè);
- 點(diǎn)擊下圖所示的** New repository**:
-
填寫(xiě)倉(cāng)庫(kù)名稱:注意 Respository name 中一定要輸入:你的用戶名.github.io,然后點(diǎn)擊”Create repository“ 按鈕完成創(chuàng)建即可。我嘗試過(guò)在這填寫(xiě)過(guò):不是用戶名.github.io,最終的后果是顯示404頁(yè)面。故,讀者在這略微留意一下。具體如下圖所示:
填寫(xiě)倉(cāng)庫(kù)名
本地環(huán)境的準(zhǔn)備工作
- 筆者使用的是Mac系統(tǒng),主要以Mac操作進(jìn)行講解;
Git安裝
- Git已幫大家下載好了,只需去百度云下載一份安裝即可,也可去Git官網(wǎng)下載;
Nodejs安裝
- 兩種方式:其一去百度云下載一份直接安裝;其二去Nodejs官網(wǎng)下載。
- 說(shuō)明:Nodejs也可使用Nodejs版本管理器nvm安裝,考慮其安裝過(guò)程中存在的問(wèn)題較多,操作流程也多,筆者不推薦大家使用這種方式安裝。此處就不列舉其安裝方式。
Hexo安裝
- 打開(kāi)終端,輸入Hexo的安裝命令:
npm install hexo-cli -g
若此命令安裝不成功時(shí),可輸入下面的命令和開(kāi)機(jī)密碼繼續(xù)完成安裝:
sudo npm install hexo-cli -g
- 打開(kāi)終端,定位到你希望存儲(chǔ)博客的目錄下,如下所示:
- 執(zhí)行Hexo命令,初始化本地博客倉(cāng)庫(kù):
hexo init 你的用戶名.github.io // 盡量和Github倉(cāng)庫(kù)使用同一個(gè)名稱
博客效果預(yù)覽
- 上述步驟完成后,基本的博客框架就已經(jīng)搭建完了,Hexo安裝完成后默認(rèn)使用landscape主題;
- 在終端定位到xxx.github.io文件夾下,并在終端輸入下面的命令就能啟動(dòng)服務(wù)預(yù)覽功能;
hero s
- 在瀏覽器上輸入網(wǎng)址:http://localhost:4000/,就能預(yù)覽到landscape主題下的博客效果,具體如圖:
- 如果你覺(jué)得這個(gè)主題很合心意,就可以默認(rèn)使用這個(gè)主題,若不滿意,那就繼續(xù)向下看吧。
Next主題安裝
- Next主題是iissnan所創(chuàng)作的一個(gè)Hexo主題,以簡(jiǎn)潔為主;
- 開(kāi)始安裝主題之前,可以打開(kāi)xxx.github.io文件,將此文件夾中的themes移除掉,當(dāng)然你可以在安裝過(guò)程中直接替換掉;
- 安裝:在終端定位到xxx.github.io目錄下,執(zhí)行下面的命令后,稍等片刻,主題就下載到對(duì)應(yīng)的位置;
cd xxx.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next
博客的站點(diǎn)配置
-
站點(diǎn)配置文件:打開(kāi)之前的xxx.github.io文件夾,找到_config.yml即為站點(diǎn)配置文件,選中該文件->右擊->打開(kāi)方式->文本編輯(也可以選擇Sublime打開(kāi)),打開(kāi)后就可以修改基本的博客配置了;(注意一下:在配置文件里‘#’就是注釋符,相當(dāng)于C語(yǔ)言中的‘//’)
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: 最晚的開(kāi)始 #站點(diǎn)名稱 subtitle: 所有的為時(shí)已晚都是開(kāi)始的最好時(shí)候 #副標(biāo)題 #個(gè)人描述 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 #語(yǔ)言 timezone: # URL #綁定域名后,要?jiǎng)?chuàng)建 sitemap.xml 時(shí)再配置該項(xiàng) ## 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 # 文章布局、寫(xiě)作格式的定義,不修改 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 #時(shí)間格式不用修改 ## 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 #每頁(yè)顯示文章數(shù),可以自行定義 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions #配置站點(diǎn)時(shí),所使用的主題和插件,切換主題可以在這里設(shè)置 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # theme: landscape # 頭像, 在xxx.github.io/source 下相對(duì)路徑,若source文件夾下沒(méi)有uploads,就新建一個(gè)名為uploads文件夾,具體見(jiàn)下面截圖 avatar: /uploads/images/avatar.png # Deployment #這里是部署到Github上的設(shè)置 ## Docs: https://hexo.io/docs/deployment.html deploy: type: git #git提交 repo: https://github.com/123sunxiaolin/123sunxiaolin.github.io.git #已創(chuàng)建的Github倉(cāng)庫(kù) branch: master #提交到的分支
- 配置好站點(diǎn)配置文件,就可以預(yù)覽一下博客的效果了,流程與前面的相同,即在終端定位到xxx.github.io文件夾,執(zhí)行hexo s命令。
博客的Next主題配置
- 主題配置文件:需要與之前講過(guò)的站點(diǎn)配置文件進(jìn)行區(qū)分,站點(diǎn)配置文件在xxx.github.io/_config.yml目錄;主題配置文件在xxx.github.io/themes/next/_config.yml目錄下;
- 關(guān)于主題可配置的選項(xiàng)略多,故采取分條講解的形式,具體如下:
1、設(shè)置關(guān)鍵字
# Set default keywords (Use a comma to separate)
keywords: “iOS, 程序猿, 文藝小青年” #修改
2、設(shè)置博客的開(kāi)始時(shí)間
# Specify the date when the site was setup
#since: 2016 #設(shè)置博客的開(kāi)始時(shí)間
3、菜單欄的設(shè)置
# ------------------------------------------------ ---------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu: #- 修改
home: / #在菜單上顯示首頁(yè)
archives: /archives //設(shè)置顯示歸檔
categories: /categories // 設(shè)置顯示分類
tags: /tags //設(shè)置顯示標(biāo)簽
about: /about //設(shè)置顯示關(guān)于
#commonweal: /404.html
4、菜單欄的圖標(biāo)設(shè)置:可從Font Awesome 網(wǎng)站查詢圖標(biāo)對(duì)應(yīng)的名稱填入到對(duì)應(yīng)的菜單項(xiàng)即可
#設(shè)置菜單的圖標(biāo),規(guī)則為:菜單(左):圖標(biāo)名(右)
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
5、設(shè)置博客的外觀
# Schemes
#scheme: Muse #默認(rèn) Scheme,這是 NexT 最初的版本,黑白主調(diào),大量留白
#scheme: Mist #Muse 的緊湊版本,整潔有序的單欄外觀
scheme: Pisces #雙欄 Scheme,當(dāng)然也是我選擇的
6、設(shè)置社交鏈接(設(shè)置了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
#設(shè)置社交鏈接對(duì)應(yīng)的圖標(biāo)
social_icons:
enable: true
# Icon Mappings. - 修改
KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
#JianShu: heartbeat
# Blogrolls -設(shè)置友情鏈接
links_title: Links
#links_layout: block
#links_layout: inline
links:
Jack_lin簡(jiǎn)書(shū): http://www.lxweimin.com/users/ef991f6d241c/latest_articles
7、設(shè)置側(cè)欄的頭像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg #修改 - 側(cè)滑欄頭像,可參考站點(diǎn)配置文件中關(guān)于頭像的設(shè)置
- 注意一點(diǎn)使用next主題時(shí),側(cè)欄頭像只能存儲(chǔ)在主題目錄下images文件夾里
8、設(shè)置側(cè)欄的方向(設(shè)置成左側(cè))
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
9、設(shè)置博客中代碼高亮顯示
# 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、設(shè)置微信支付寶贊賞功能
# 打賞配置
# 打賞說(shuō)明文本
reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享,您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作!
# 微信收款二維碼
wechatpay: /uploads/images/wechat-reward-image.png
# 支付寶收款二維碼
alipay: /uploads/images/alipay-reward-image.png
11、設(shè)置微信公眾號(hào)訂閱
# Wechat Subscriber - 微信訂閱
wechat_subscriber:
enabled: true
qcode: /uploads/images/wechat-qcode.jpg
description: 歡迎您掃一掃上面的微信公眾號(hào),訂閱我的博客!
12、添加網(wǎng)頁(yè)計(jì)數(shù)器-不蒜子
# 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:
創(chuàng)建分類界面
- 打開(kāi)終端,定位到xxx.github.io目錄下;
- 執(zhí)行下面的命令,新建一個(gè)名為categories的頁(yè)面;
hexo new page categories
-
創(chuàng)建完成后,在對(duì)應(yīng)的目錄下找到index.md文件,進(jìn)行如下的修改:
--- title: categories date: 2016-08-20 22:17:49 type: "categories" # 將頁(yè)面的類型設(shè)置為 categories,主題將自動(dòng)為這個(gè)頁(yè)面顯示所有分類 comments: false ---
創(chuàng)建標(biāo)簽界面
- 打開(kāi)終端,定位到xxx.github.io目錄下;
- 執(zhí)行下面的命令,新建一個(gè)名為tags的頁(yè)面;
hexo new page tags
-
創(chuàng)建完成后,在對(duì)應(yīng)的目錄下找到index.md文件,進(jìn)行如下的修改:
--- title: tags date: 2016-08-20 22:17:49 type: "tags" # 將頁(yè)面的類型設(shè)置為 tags,主題將自動(dòng)為這個(gè)頁(yè)面顯示為標(biāo)簽云 comments: false ---
上述創(chuàng)建的分類和標(biāo)簽界面是主題自動(dòng)維護(hù)的,用戶只需要按照規(guī)則書(shū)寫(xiě)文章即可。
如何寫(xiě)和發(fā)布博客
主要使用的Markdown語(yǔ)法寫(xiě)文章,推薦Mac上使用Mou編輯軟件,可帶查看其語(yǔ)法幫助;
-
在文章開(kāi)頭需要添加一些配置,如下:
--- title: 個(gè)人博客搭建詳解(Windows和Mac通用版) # 這是標(biāo)題 categories: # 這里寫(xiě)的分類會(huì)自動(dòng)匯集到 categories 頁(yè)面上,分類可以多級(jí) - 博客站教程 - 個(gè)人博客書(shū)寫(xiě) tags: # 這里寫(xiě)的標(biāo)簽會(huì)自動(dòng)匯集到 tags 頁(yè)面上 - 專業(yè) - 自由 ---
添加好上述配置后,就可以安心寫(xiě)文章了。最后,將寫(xiě)好的文章放到xxx.github.io/source/_post目錄下;
然后,就可在本地進(jìn)行測(cè)試。在終端上定位到xxx.github.io目錄下,執(zhí)行 hexo s命令,后在瀏覽器輸入http://localhost:4000/即可看到博客的效果。
可在終端輸入下面的命令完成安裝自動(dòng)部署發(fā)布工具:
sudo npm install hexo-deployer-git --save
-
發(fā)布到GithubPages
當(dāng)在本地確認(rèn)博客效果后,就可以將md文件生成靜態(tài)網(wǎng)頁(yè)上傳至GithubPages,在終端定位到xxx.github.io目錄下,執(zhí)行下面的命令即可:
hexo clean #清楚網(wǎng)頁(yè)緩存
hexo g #生成靜態(tài)網(wǎng)頁(yè)
hexo d #開(kāi)始部署
//當(dāng)然也可以使用一次性命令:
hexo clean && hexo g && hexo d
注意:首次部署時(shí),終端會(huì)讓你輸入Github的用戶名和密碼,按照要求填寫(xiě)后,稍等幾分鐘,就可以完后部署。
最后一步
- 在瀏覽器上輸入http://xxx.github.io就可以看到屬于你的博客了。是不是很激動(dòng),那就趕緊行動(dòng)吧!
以上內(nèi)容是筆者在創(chuàng)建個(gè)人博客過(guò)程中一些做法,大家如有其它意見(jiàn)歡迎評(píng)論。