你該有一個(gè)屬于自己的個(gè)人博客了

個(gè)性與張揚(yáng)

前言

  • 周末用了不到一天時(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**:
創(chuàng)建倉(cāng)庫(kù)
  • 填寫(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安裝
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ǔ)博客的目錄下,如下所示:
鎖定存儲(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主題下的博客效果,具體如圖:
默認(rèn)博客效果
  • 如果你覺(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 #提交到的分支
    
頭像設(shè)置目錄
  • 配置好站點(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
設(shè)置后的效果圖
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
    ---
    
設(shè)置后的效果
創(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)論。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容