來(lái)，我們搭個(gè)自己的博客主頁(yè)

文/字芽

以前我在簡(jiǎn)書(shū)看到有很多關(guān)于搭建個(gè)人獨(dú)立博客的教程都沒(méi)有在意，這次突然心血來(lái)潮，想自己搭一個(gè)嘗試下，竟然成功了，便特地來(lái)回饋簡(jiǎn)書(shū)。

首先說(shuō)明，我只有編程基礎(chǔ)，但沒(méi)有Web編程基礎(chǔ)，所以我跟很多人一樣很多東西都不知道什么意思。說(shuō)這些只是給你先吃個(gè)定心丸，沒(méi)基礎(chǔ)也沒(méi)事，搭建過(guò)程真的很簡(jiǎn)單，話不多說(shuō)，開(kāi)始。

一、準(zhǔn)備工作

  • 申請(qǐng)一個(gè)Github賬號(hào)
  • 安裝Node.js
    選擇LTS版本。
  • 安裝Git或者Github
    這里主要是為了安裝Git，選擇跟你系統(tǒng)匹配的版本即可。如果你不知道Git是什么東西，請(qǐng)安裝Github，然后自己再去了解一下。
  • 安裝 Hexo
    任意目錄執(zhí)行如下命令即可： 
    > npm install -g hexo

二、搭建初始博客主頁(yè)

1. 建立你的博客倉(cāng)庫(kù)

倉(cāng)庫(kù)主要用來(lái)存放你的博客相關(guān)的數(shù)據(jù)。先到你的Github主頁(yè)找到New repository按鈕點(diǎn)擊建立新倉(cāng)庫(kù)。然后按照，下圖所示填寫(xiě)倉(cāng)庫(kù)名字，一定要和你的申請(qǐng)Github賬戶時(shí)的填的名字一致，其他的默認(rèn)即可。最后點(diǎn)擊下方的創(chuàng)建按鈕即可。之后你部署更新博客內(nèi)容時(shí)，就會(huì)提交文件到這個(gè)倉(cāng)庫(kù)。

2. 創(chuàng)建本地博客

調(diào)用下面命令初始化一個(gè)本地博客，該命令會(huì)在當(dāng)前文件夾下生成一個(gè)yourname.github.io的文件夾。

> hexo init chunix.github.io

3. 本地博客調(diào)試

  • 新建一篇名為"Hello Hexo"的文章

    > hexo new "Hello Hexo"

    文件將產(chǎn)生在/source/_posts/這個(gè)目錄下，你可以打開(kāi)編輯其內(nèi)容。也可以不使用這個(gè)命令，直接將你要發(fā)布的文章的Markdown文件放到這個(gè)目錄即可。

  • 產(chǎn)生博客網(wǎng)頁(yè)需要的文件

    > hexo g

    比如可以將Markdown文章轉(zhuǎn)換為相應(yīng)的HTML文件，其中g也可以用generate。

  • 啟用本地服務(wù)器調(diào)試

    > hexo s


    然后你就可以在瀏覽器輸入localhost:4000來(lái)查看你的網(wǎng)頁(yè)設(shè)置，如下：

4. 部署到你的Github倉(cāng)庫(kù)

要部署本地的配置到你的遠(yuǎn)程倉(cāng)庫(kù)需要做兩件事：

  • 首先需要安裝部署工具，在你前面初始化的文件夾下執(zhí)行如下命令即可。

    > npm install hexo-deployer-git --save

  • 更改_config.yml配置你Github倉(cāng)庫(kù)的信息

    # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://github.com/chunix/chunix.github.io.git
    branch: master

做完以上兩部，你就可以調(diào)用hexo deploy（簡(jiǎn)寫(xiě)命令hexo d）命令實(shí)施部署了。

> hexo d

命令成功執(zhí)行完，你就可以通過(guò)https://yourname.github.io訪問(wèn)你的博客主頁(yè)，像我的這個(gè)：藤榕

提醒：執(zhí)行hexo d的時(shí)候，你的主頁(yè)不能處于打開(kāi)狀態(tài)，也就是說(shuō)，如果你一邊開(kāi)著你的博客主頁(yè)，一邊執(zhí)行命令，就會(huì)失敗。

三、完善你的博客主頁(yè)

第二步成功之后，你會(huì)發(fā)現(xiàn)，這還只是Hexo的官方示例主頁(yè)。怎么把它變成自己想要的樣子呢？我們繼續(xù)往下走。

1. 聲明擁有者

在_config.yml里找到如下字段，更改為你喜歡的名字。其中zh-Hans代表語(yǔ)言是簡(jiǎn)體中文。

# Site
title: 藤榕
subtitle:
description: 提筆為字，落筆生芽。
author: 字芽
language: zh-Hans
timezone:

2. 更換主題

感覺(jué)默認(rèn)的主題不好看，那就換個(gè)主題。以next主題為例：

  • 克隆主題代碼
>git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 更換主題
    在_config.yml里找到如下字段，更改為你剛剛下載的主題名字。 
    # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

3. 配置主題

首先說(shuō)明一下，有關(guān)主題的配置都在theme/next/_config.yml中修改，不要和yourname.github.io/_config.yml文件搞混。

  • 菜單顯示調(diào)整
    在theme/next文件夾下_config.yml里找到menu字段,不想顯示在主頁(yè)就用#注釋掉，調(diào)換上下順序可以調(diào)整菜單的顯示順序。

    menu:
    home: /
    categories: /categories
    tags: /tags
    archives: /archives
    about: /about
    #commonweal: /404.html

  • 配置菜單內(nèi)容
    即使開(kāi)啟了菜單之后，并沒(méi)有實(shí)際內(nèi)容，點(diǎn)擊相應(yīng)的選項(xiàng)會(huì)返回空白頁(yè)。這個(gè)時(shí)候我們要自己手動(dòng)添加這幾個(gè)頁(yè)面。很簡(jiǎn)單，在yourname.github.io目錄下使用下面三條命令可以分別生成分類、標(biāo)簽和關(guān)于三個(gè)頁(yè)面的Markdown文件，分別在yourname.github.io/source/下三個(gè)對(duì)應(yīng)的文件夾中。

>hexo new page "categories"
>hexo new page "tags"
>hexo new page "about"

接著我們做如下修改：
在source/categories/index.md和source/tags/index.md分別添加對(duì)應(yīng)的type項(xiàng)。如下是：categories/index.md的改動(dòng)。

title: categories
date: 2016-05-04 13:50:14
type: "categories"

另外還要在你的文章中加入分類和標(biāo)簽信息，如下是該文章的標(biāo)簽和分類信息。

    ---
    title: 來(lái)，我們搭建個(gè)自己的博客主頁(yè)
    date: 2016-05-04 20:44:49
    tags:
     - Hexo
     - Blog
    categories: 
     - Bye World
    ---

---
在`source/about/index.md`則直接添加你想要提供的關(guān)于博客或者你自己的內(nèi)容即可，比如我的：

    ---
    title: about
    date: 2016-05-04 13:24:34
    ---
    <center>![](../images/about.jpg)</center>
    ### 作者：
    **字芽**
    ### 座右銘：
    **失敗只有一種，就是半途而廢。**

其中，我把圖片放在了source/images/下面。顯示效果如下：

  • 作者頭像
    其中頭像圖片avatar.jpg放在theme/next/source/images。
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.jpg
    # in site  directory(source/uploads): /uploads/avatar.jpg
    avatar: /images/avatar.jpg
  • 閱讀全文鏈接
    # Automatically Excerpt. Not recommand.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: true
      length: 150
  • 去掉文章目錄中的多余編號(hào)
    下面的number默認(rèn)是true，會(huì)導(dǎo)致像我這樣已經(jīng)給文章各模塊加了編號(hào)的人有雙重編號(hào)的問(wèn)題，我們需要設(shè)置為false。
# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: false
  • Next主題三種風(fēng)格切換
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

4. 打開(kāi)打賞功能

首先準(zhǔn)備一張你支付寶賬戶的二維碼截圖，命名為alipay.png放到theme/next/source/images。然后在theme/next/_config.yml文件中添加如下字段：

# Donate 打賞
alipay: /images/alipay.png

打開(kāi)打賞功能之后就可以在每篇文章最后看到打賞的按鈕了。

5. 添加多說(shuō)評(píng)論支持

  • 注冊(cè)多說(shuō)賬號(hào)（支持微博，QQ等直接登陸）；

  • 注冊(cè)完之后，在首頁(yè)點(diǎn)擊我要安裝按鈕,出現(xiàn)如下界面，按照你的站點(diǎn)填寫(xiě)：

  • 創(chuàng)建完站點(diǎn)之后，到如下為止，把你的多說(shuō)user_id記錄下來(lái)，之后要用。

  • 更改theme/next/_config.yml如下字段：

    # Duoshuo ShortName
    duoshuo_shortname: chunix

    # Share
    duoshuo_share: true

    duoshuo_info:
    ua_enable: true
    admin_enable: true
    user_id: 6280************
    #admin_nickname: Author

    當(dāng)admin_enable是true時(shí)，必須填寫(xiě)user_id。這個(gè)打開(kāi)跟不打開(kāi)的區(qū)別好像是是否顯示評(píng)論用戶的軟件信息，如下圖所示：

四、最后

強(qiáng)烈建議大家每次做好一個(gè)改動(dòng)都要先本地看看有沒(méi)有生效，先hexo g，再hexo s即可。最后確認(rèn)改動(dòng)都OK，再使用hexo d部署到Github倉(cāng)庫(kù)。還要感謝《Windows下搭建免費(fèi)個(gè)人博客》的作者qingfeng825，我就是看了這篇文章才有了自己搭建博客的興趣。其實(shí)整個(gè)搭建過(guò)程真的是依葫蘆畫(huà)瓢，非常簡(jiǎn)單，只是更多的樂(lè)趣和知識(shí)還等著我們探索。最后，祝大家玩的開(kāi)心。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容