image

前面說了這是我第二次搭建博客偏形，所以對搭建博客的基本流程還算清楚，當(dāng)時也寫過一次博客的搭建流程觉鼻，寫的特別細俊扭，每一步，每個截圖都貼上去了坠陈。

但說實話萨惑，這種搭建博客的步驟網(wǎng)上一大堆，而且你去復(fù)刻的時候會遇到各種問題仇矾，著實讓人感覺頭疼庸蔼。其實，個人博客搭建就那些東西贮匕，所以這篇博客我主要紹下搭建博客的基本步驟姐仅，同時推薦幾個我在搭建博客中用到的軟件。

博客應(yīng)該是什么樣子呢

首先需要明確我們需要一個怎樣的博客，對于我自己來說有如下四點要求：

• 搭建博客方便
• 簡潔的博客界面
• 友好的文章撰寫工具
• 博客能夠方便的評論

我覺得這些掏膏，對于我們想擁有一個自己的博客的人來說太重要了劳翰！首先如果博客搭建不夠方便，那基本上第一步就邁不出去馒疹；其次佳簸，博客看起來太丑或手機上不兼容，那真是讓人接受不了颖变；再者生均，寫一篇文章如果需要繁瑣的撰寫步驟和限制，估計你寫幾篇之后也就不想繼續(xù)寫了悼做；最后如果你寫的文章不管好壞疯特，別人看了都不能發(fā)表意見，那樣博客就失去了交互性肛走。接下來我就來介紹下我是如何搭建一個滿足上述四個要求的博客網(wǎng)站。

開始搭建

在博客搭建之前我想說明下录别，如果你有一定的編程經(jīng)驗?zāi)敲创罱ㄟ^程則會比較順利朽色，如果沒有經(jīng)驗也沒有關(guān)系，遇到問題百度下大部分問題都可以解決组题，如果解決不了葫男，也歡迎大家在下面留言，我會一一給大家解答崔列。

一梢褐、快速搭建

image

• 挑選

簡單的說博客其實就是一個網(wǎng)站，有了博客框架赵讯，我們就不需要去通過寫代碼來搭建博客盈咳，我們只需要做一些簡單的配置，來自定義你博客的名稱边翼、頭像鱼响、主題等，讓其變?yōu)樽约合胍娘L(fēng)格组底。目前流行的博客框架有WordPress和Hexo丈积，WordPress一般國外用的比較多，這里我推薦的是Hexo债鸡，原因很簡單江滨，因為用的人多，相關(guān)的資料也比較多厌均，如果遇到問題唬滑，上網(wǎng)上去查一下就很快可以解決。同時官網(wǎng)文檔是這么介紹的：

Hexo 是一個快速、簡潔且高效的博客框架间雀。Hexo 使用 Markdown（或其他渲染引擎）解析文章悔详，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁惹挟。

可見其速度也非城洋Γ快，到這里博客框架我們就選好了连锯。

• 搭建

Hexo的搭建可以參考Hexo官方文檔归苍，現(xiàn)在已經(jīng)推出了視頻教程。簡單總結(jié)下可以分為如下幾個步驟：

1. 配置環(huán)境（Node.js运怖、Git拼弃、Hexo）
2. 建站（在電腦本地的一個文件夾下執(zhí)行 hexo init 生成網(wǎng)站所需的文件）
3. 配置（在 _config.yml 文件中配置網(wǎng)站的標(biāo)題、名稱等信息）

完成上述三個步驟之后就可以通過順次執(zhí)行 hexo g 和 hexo s 在本地瀏覽器中進行預(yù)覽了摇展。

• 部署

image

僅僅在自己電腦上能夠瀏覽吻氧，肯定是你不希望的。那我們?nèi)绾巫屗械娜硕伎梢钥吹轿覀兊牟┛湍赜搅渴紫任覀儾恍枰ㄟ^購買服務(wù)器來展示你的博客盯孙，現(xiàn)在有很多免費的Pages靜態(tài)服務(wù)，你可以把網(wǎng)站托管在上面祟滴，比如GitHub振惰、GitLab、Coding垄懂，這里我推薦Coding（服務(wù)器在國內(nèi)訪問速度快）骑晶。部署步驟如下：

1. 注冊Coding賬號、創(chuàng)建一個項目草慧、開通Pages服務(wù)桶蛔。

2. 修改博客配置文件 _config.yml 最后面的 deploy 的 repo 加上:

coding: https://git.dev.tencent.com/AccountName/ProJectName.git

3. 執(zhí)行 hexo g -d 部署成功之后，你就可以通過例如：1649201921.coding.me/blog 讓其他人來訪問你的博客冠蒋。

到這里部署就完成了羽圃，如果你想讓國外友人也可以方便的訪問你的博客，也可以同時部署到GitHub抖剿。最后你可以去阿里云等平臺去購買域名朽寞，然后添加域名解析到自己的博客，這樣你就可以通過自己的域名訪問你的博客了斩郎，在這里提醒下最好購買能夠備案的域名Ｄ匀凇！缩宜！

二肘迎、優(yōu)化界面

image.png

• 挑選

雖然上面我們已經(jīng)把網(wǎng)站部署好了甥温，但是你會發(fā)現(xiàn)網(wǎng)站并不是自己想要的樣子，因為使用的是默認的主題 妓布，所以接下來我們要給我們的博客換一套好看的“皮膚”姻蚓。Hexo支持主題的更換，并且有很多好看的主題匣沼，大部分都同時支持手機端訪問狰挡。你可在Hexo的主題頁面來挑選你所喜愛的主題。在這里我推薦兩個主題：

• Yilia
• NexT

我的博客使用的是NexT主題释涛，NexT主題也有幾種不同的樣式加叁，可以在在NexT的GitHub上查看不同樣式的博客網(wǎng)站效果，找一個你所喜歡的唇撬。

• 配置主題

主題的配置也很簡單它匕，分為如下三步：

1. 安裝，將主題clone到本地的 themes/next 文件夾下窖认。
2. 配置博客根目錄下的 _config.yml 修改為 theme: next 豫柬。
3. 配置主題文件下的 _config.yml ，該目錄你可以修改博客的大部分自定義配置耀态。例如設(shè)置菜單轮傍、 頭像、昵稱首装、第三方服務(wù)（文章統(tǒng)計、評論杭跪、分享）等仙逻，詳細的配置你可以查看 NexT 使用文檔 。

到這里你可以通過本地預(yù)覽剛剛配置的博客涧尿，相信現(xiàn)在的博客大體上就可以滿足你的要求了系奉，但是似乎還沒有你自己寫的文章，那接下來我們就來看看如何方便的來進行博文的撰寫姑廉。

三缺亮、開始書寫

image

對于博客擁有者來說寫博客會占用其大部分時間。所以博客的創(chuàng)作過程的友好性也是十分重要的桥言！Hexo通過渲染MarkDown格式的文本來展示你的博客萌踱。所以首先我們需要了解MarkDown的語法。

• 學(xué)習(xí)MarkDown語法

對于MarkDown的學(xué)習(xí)快速上手可以參考這里?? segmentfault

詳細的MarkDown語法可以參考這里?? 簡書

• 挑選MarkDown編輯器

熟悉了MarkDown語法之后我們需要一個友好的MarkDown編輯器号阿。推薦如下兩個編輯器并鸵。

• CmdMarkDown
• Typora

最開始用的是作業(yè)部落CmdMarkDown好處是可以左右對照。注冊賬號之后可以云端同步扔涧。后來無意之間發(fā)現(xiàn)了Typora园担，被其簡潔的界面和無縫的編寫方式所吸引届谈。

• 圖片怎么辦??

image

博客中顯示圖片相信對每個寫博客的人來說都很重要。因為圖片較大弯汰，所以不建議和博客放一起艰山，可以在GitHub或Coding上新建一個倉庫放置圖片，但通常的做法是利用圖床咏闪。這里我推薦如下2個：

• 七牛云對象存儲
• 阿里云對象存儲

本來想推薦七牛云曙搬，但是不幸的是，七牛云現(xiàn)在每個自動分配的圖片訪問域名只能用一個月汤踏。如果想繼續(xù)使用织鲸，你只能綁定你自己已備案的域名才能夠享受免費每月10G的存儲空間和100萬次的GET請求，問了客服溪胶，花錢也不能長久使用搂擦。雖然這個免費策略對我們剛開始寫博客的朋友來說確實很太友，但域名備案需要購買服務(wù)器哗脖，且需要花費20天左右的時間瀑踢。所以如果你現(xiàn)在想使用，在購買域名的時候一定要注意才避，你的域名是否可以備案橱夭，2018年后工信部對于很多域名的備案都有限制，例如.cc的域名在北京就不可以備案桑逝。

再來說說阿里云棘劣，阿里云如果想使用對象存儲，需要你購買存儲包和流量包楞遏，而且請求次數(shù)較多時也會計費茬暇。適合企業(yè)級對于存儲容量和訪問次數(shù)要求較大的用戶。但是一個好處就是寡喝，你可以先只花5元購買半年40G的存儲空間糙俗。可以免費獲得一個圖片訪問的域名预鬓。這個域名是和你的套餐一起的巧骚。只要你續(xù)費就不會過期。其他的花費是大概每個0.5元/G的流量費和0.1元/萬次的請求費格二，這取決于你博客的圖片大小劈彪、數(shù)量和訪問人數(shù)，剛開始使用的話不會太貴蟋定。

如果你已經(jīng)有一個備案過的域名粉臊，你可以添加一個域名解析，通過你自己的域名來訪問七牛云或阿里云的照片驶兜，例如：img.carlwe.com/whyblog.png

• 通過使用iPic讓添加圖片更方便

image

如果你的圖床已經(jīng)就緒扼仲，一般圖床都提供上傳圖片的地方远寸。但是每次你都要去制作圖片->打開網(wǎng)站->上傳圖片->復(fù)制鏈接->把鏈接粘貼進去，確實不太方便屠凶。這里我推薦使用Typroa和iPic來結(jié)合使用驰后。iPic目前需要收費，6/元每月矗愧，支持正版灶芝。

• iPic

按照iPic上介紹的方式完成你圖床和Typroa的設(shè)置之后，你只需要將圖片拖入Typora即可唉韭。其他的你都不用管了夜涕。

• 通過TinyPNG4Mac來壓縮圖片

image

如果你使用Mac，可以使用TinyPNG4Mac來壓縮圖片属愤。TinyPNG4Mac 利用TinyPng的圖片壓縮技術(shù)女器，只需將圖片拖入即可壓縮，壓縮比驚人住诸，同時圖片質(zhì)量感官上基本上沒有改變驾胆，關(guān)鍵還免費。強烈推薦贱呐！

??TinyPNG4Mac

四丧诺、評論系統(tǒng)

image

通過上述三步，你已經(jīng)可以開心的寫自己的博客了奄薇。然而驳阎，博客發(fā)表之后如果你的博客能夠評論那樣交互性會變得更好，有了評論之后馁蒂，你也可以獲得讀者的反饋搞隐，同讀者進行交流，提升自己远搪。

• 挑選

之前我的博客用的是暢言，我們可以通過微博或手機接收驗證碼登陸逢捺，然后進行評論谁鳍，評論的門檻很高，就算有想要評論的朋友也會因為繁瑣的過程而放棄劫瞳。類似的評論系統(tǒng)有很多倘潜。而且大多需要網(wǎng)站進行備案。這里說下我的推薦：

• Valine

優(yōu)點是不需要域名備案志于、支持匿名評論涮因、NexT原生支持、統(tǒng)一的風(fēng)格伺绽、支持MarkDown养泡、Gravatar嗜湃、郵件提醒、文章閱讀量統(tǒng)計澜掩，剩下的就是接入了购披。

• 接入

配置主題文件下的 _config.yml 開啟Valine評論，同時需要去LeanCloud（評論數(shù)據(jù)所在的位置）注冊賬號肩榕，獲取appid和appkey刚陡，然后在配置文件中填入即可，具體步驟可參考 快速開始

作為博客所有人株汉，你可以去Gravatar注冊一個賬號然后上傳你的頭像筐乳，在評論的時候輸入你的郵箱和昵稱就可以顯示你的頭像了。同時你可以在LeanCloud中設(shè)置郵件提醒乔妈，也可以開啟評論驗證碼蝙云，但是不太推薦。

總結(jié)及完善

通過上面四點我們已經(jīng)可以搭建一個滿意的博客了褒翰，就像你現(xiàn)在看到樣子贮懈。博客的搭建過程由于不同的環(huán)境可能會出現(xiàn)不同的問題，但是總結(jié)下來优训，我覺得如下三點很重要：

1. 盡量閱讀官方的文檔進行操作朵你。大部分時候官方文檔可以解決你90%的問題，而且是最權(quán)威的解決方式揣非。
2. 遇到問題不要放棄抡医，多嘗試。
3. 博客搭建容易早敬，難的是堅持寫博客忌傻。

雖然目前博客已經(jīng)可以運行了，但其實還是有很多可以優(yōu)化的地方搞监，以下幾點也是接下來我努力的方向：

1. 能夠友好的分享到微信好友及朋友圈
2. 更好的圖片水孩、音頻、視頻瀏覽體驗
3. 博客較多時開通搜索功能
4. 創(chuàng)建自定義的文章分類

這就是我博客的搭建之路琐驴，過程中也遇到過很多問題俘种，但只要你堅持下去，相信你的博客也將變得越來越好绝淡，有什么問題可以在下面給我留言宙刘。

發(fā)布于：2018-12-22
原文鏈接