資訊專欄INFORMATION COLUMN
摘要：就拿本篇教程為例，發(fā)布第一篇文章。十分鐘免費(fèi)博客建站教程如果你沒有自定義的路徑的話，默認(rèn)生成的文件都會(huì)在目錄下。具體語法請(qǐng)移步官網(wǎng)最后附上我的博客鏈接嚶嚶嚶填坑小窩
title: Hexo+NexT+Heroku十分鐘免費(fèi)博客建站教程
date: 2016-10-29 20:57:20
author：嚶嚶嚶
接觸互聯(lián)網(wǎng)到現(xiàn)在不長不短也有兩年了，從最開始連css都不會(huì)寫的小白，到每天對(duì)著一堆看不懂的英文文檔持續(xù)蒙蔽和抓狂的新手，再到現(xiàn)在積累了一定的項(xiàng)目，中間也經(jīng)歷了踩坑無數(shù)和填坑無數(shù)的學(xué)習(xí)過程。但由于之前過于偷懶，這么兩年下來啥也沒留下。是時(shí)候覺得應(yīng)該要好好記錄下自己的成長經(jīng)歷了。之前一直覺得很多東西網(wǎng)上一搜教程一大堆，自己寫了也沒啥意思，無非也就是復(fù)制粘貼?？墒蔷幋a本來就是一個(gè)建立復(fù)制粘貼的基礎(chǔ)上學(xué)習(xí)的過程。之前看到有人說自己寫博客寫教程不是為了給別人看的，主要是對(duì)自己所學(xué)知識(shí)的一種總結(jié)?，F(xiàn)在自己也算是正式進(jìn)入互聯(lián)網(wǎng)行業(yè)開始工作，這次折騰這個(gè)也算是迎來一次嶄新良好的開始吧。本來之前想自己寫站，整個(gè)博客系統(tǒng)寫了將近四分之三了吧，最后覺得一開始就寫得不夠好，即使勉強(qiáng)上了后期也很難維護(hù)，反而給自己又找了個(gè)偷懶的借口。干脆就懶得折騰，直接用開源的框架庫吧。
說到博客建站的話現(xiàn)在網(wǎng)上各種各樣框架和解決方案就多了去了，什么WordPress啊，GitHub Pages啊真的是肥腸容易挑花了眼。出于顏值和方便的考慮，最終選擇了Hexo（這貨支持macdown啊這貨一鍵發(fā)布啊這貨各種啊……蛤蛤蛤）。好吧，廢話說完就直奔主題吧。
第一步首先當(dāng)然是安裝Hexo，安裝過程十分easy，照著官方文檔走一遍要不了幾分鐘就OK了。當(dāng)然前提是你已經(jīng)裝了Node.js和Git。（沒裝的筒子請(qǐng)自行移步官網(wǎng)，Windows童鞋請(qǐng)自動(dòng)忽略此文……對(duì)我是Mac狗表示不會(huì)用Windows囧）
Mac童鞋沒裝Xcode編譯會(huì)報(bào)錯(cuò)哦～裝個(gè)Xcode先。Xcode 完成后，啟動(dòng)并進(jìn)入 Preferences -> Download -> Command Line Tools -> Install 安裝命令行工具。
假如前提條件都OK的話，安裝就是一條命令的事兒：
$ npm install -g hexo-cli建站
嗯，一條命令敲完就直奔主題了，奏是辣么迅速。隨便進(jìn)個(gè)文件夾，然后執(zhí)行以下三條命令，博客就建好了（想想自己之前還費(fèi)勁寫半天，好心酸）：
$ hexo init$ cd $ npm install
完成之后奏是介個(gè)樣子的目錄結(jié)構(gòu)：
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themespackage.json
這個(gè)文件也就不多說什么了，總之你想裝啥都可以在這里配置，EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，可以自由移除。
_config.yml這個(gè)文件就是一些站點(diǎn)基本信息的配置,具體參數(shù)請(qǐng)移步官網(wǎng)。只是有一點(diǎn)肥腸重要！這個(gè)文件中所有冒號(hào)后面的空格必須嚴(yán)格檢查，只能有一個(gè)且是半角，不要用Tab，不然你就會(huì)看到這樣錯(cuò)誤：
end of the stream or a document separator is expected
基本配置好了后執(zhí)行以下命令，就能在本地跑起來了，訪問網(wǎng)址為：http://localhost:4000/。
$ hexo server
默認(rèn)跑在4000端口，當(dāng)然你也可以用-p參數(shù)自行制定端口，以下就是什么配置都沒有做跑起來的結(jié)果：
默認(rèn)的主題landspace還不錯(cuò)吧，感覺是要比什么WordPress，GitHub Pages好看一些吧囧……但是還是不夠……所以第二個(gè)主角登場(chǎng)了：NexT
安裝NexT到站點(diǎn)目錄地下執(zhí)行以下命令：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
然后打開剛剛說的站點(diǎn)目錄底下的配置文件_config.yml，將theme字段更改為next:
theme: next
然后呢就算是配置好了，但是在切換主題之后、驗(yàn)證之前， 最好使用 hexo clean 來清除 Hexo 的緩存。然后跑起來看一看：
$ hexo s --debug // 調(diào)試模式，觀察是否有錯(cuò)誤信息輸出
然后呢就是這個(gè)樣子：
想要修改主題的默認(rèn)配置可以修改themes/next/_config.yml文件。更多細(xì)節(jié)就不再贅述，請(qǐng)移步Next看官方指南。之后也會(huì)針對(duì)NexT再寫一篇進(jìn)階指南。
安裝Heroku到現(xiàn)在為止呢站點(diǎn)算是建好了，接下來就需要部署了。之所以選擇Heroku也沒別的，因?yàn)?free而且速度還OK。
首先安裝Heroku。Homebrew的同學(xué)請(qǐng)往下看，其他同學(xué)請(qǐng)移步Heroku官網(wǎng)下載。
$ brew install heroku-toolbelt $ heroku update
下載好了之后需要先初始化一個(gè)Heroku的應(yīng)用，先進(jìn)入站點(diǎn)目錄下登陸Heroku：
$ heroku login Enter your Heroku credentials. Email: [email protected] Password: ...
然后創(chuàng)建一個(gè)應(yīng)用：
$ heroku create
體現(xiàn)hexo強(qiáng)大的地方到了，你可以直接跳過Heroku文檔里一堆復(fù)雜的部署步驟，因?yàn)閔exo本身就支持一鍵部署，首先先下載個(gè)heroku部署插件：（溫馨小提示 --save就是默認(rèn)下載到dev文件下）
$ npm install hexo-deployer-heroku --save
接下來就是修改配置文件了(站點(diǎn)目錄下的__config.yml)：
deploy: type: heroku repo:message: [message]
repository url就是Heroku庫（Repository）地址，到你的heroku所創(chuàng)建的app里面Settings就能看到。就是Git URL所對(duì)應(yīng)的地址。message就是自定提交信息，默認(rèn)為 Site updated: {{ now("YYYY-MM-DD HH:mm:ss") }})。這里建議沒有特殊需求的小白們?yōu)榭站秃?，不然姿?shì)不正確亂七八糟一堆報(bào)錯(cuò)。
好的，接下來離成功還有一步之遙：
$ hexo deploy
按下回車坐等看到INFO Deploy done: heroku的輸出信息，你就可以打開剛剛的Heroku庫地址看到你新鮮出爐的博客了。
綁定域名當(dāng)然如果你不滿足herku給你分配的域名，你也可以綁定你自己的域名，但是需要heroku需要你綁定信用卡。
進(jìn)入你的app的Settings界面找到Add domain如下：
添加完自己的域名之后會(huì)生成一個(gè)CNAME記錄。修改你的域名的DNS記錄，調(diào)整CNAME記錄，等待新的解析生效即可。到此，恭喜你，你可以在新博客里面肆意折騰了。
接下來就該發(fā)文了吧。就拿本篇教程為例，發(fā)布第一篇文章。
$ hexo new Hexo+NexT+Heroku十分鐘免費(fèi)博客建站教程
如果你沒有自定義source的路徑的話，默認(rèn)生成的文件都會(huì)在source/_posts目錄下。
建議還是寫一下tags date等信息，方便你通過標(biāo)簽和日期管理文章。寫好之后生成頁面并部署網(wǎng)站：
$ hexo generate -d
雖然說呢hexo是支持macdown的，但是生成頁面的時(shí)候還是需要自己的規(guī)則，比如引入的外部鏈接，所以如果完全按macdown的語法來寫，生成頁面會(huì)報(bào)錯(cuò)。具體語法請(qǐng)移步官網(wǎng)
最后附上我的博客鏈接：嚶嚶嚶填坑小窩
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91117.html
摘要：如果實(shí)在不會(huì)安裝可以去網(wǎng)上找教程。打開，跳轉(zhuǎn)到剛剛創(chuàng)建的文件夾位置，運(yùn)行命令然后會(huì)在你的文件夾中搭建好了環(huán)境配置配置修改一些你的博客名字描述作者等。基于我的個(gè)人經(jīng)驗(yàn)，建議都開啟開啟標(biāo)簽頁命令，在博客目錄添加元數(shù)據(jù)開啟分類頁命令，在博 Windows環(huán)境下Git安裝、配置SSH key、安裝node.js npm、安裝Hexo及配置、發(fā)布博客 前言 使用github pages服務(wù)搭建博客的...
摘要：自建主要花費(fèi)在購買云服務(wù)器上和靜態(tài)資源托管上，剩余工作一力承擔(dān)。 寫這系列文章的初衷是：對(duì)自己知識(shí)面廣度和深度的確定，并以此調(diào)整后續(xù)的發(fā)展和學(xué)習(xí)方向。希望能達(dá)到溫故而知新的效果。 選擇從建站入手，是因?yàn)檫@個(gè)是最常見的要求。對(duì)于公司而言，網(wǎng)站是展示公司主旨、業(yè)務(wù)、溝通方式、宣傳營銷的必選方案，一個(gè)符合公司形象的高質(zhì)量官網(wǎng)，必然能讓客戶留下良好的第一印象。，對(duì)個(gè)人而言，博客是表達(dá)其特有的思...
說在前面本地使用macOS，vps系統(tǒng)為debian 8；雖說是跳坑指南，但是這篇文章本意也僅僅自用，總結(jié)一下自己遇到的問題和解決方法，僅供參考，如有其他問題請(qǐng)百度(google) 整體思路：本地調(diào)試完的hexo項(xiàng)目文件通過git推送給vps，然后直接部署在vps上使用域名來訪問，這樣一個(gè)屬于自己的blog就可以完成了 showImg(https://segmentfault.com/img/bV...
摘要：設(shè)置什么是本用于介紹托管在的項(xiàng)目，不過，由于他的空間免費(fèi)穩(wěn)定，用來做搭建一個(gè)博客再好不過了。你可以通過來訪問你的個(gè)人主頁。執(zhí)行過程中可能需要讓你輸入賬戶的用戶名及密碼，按照提示操作即可。推薦使用騰訊公益。 系統(tǒng)環(huán)境配置 要使用Hexo，需要在你的系統(tǒng)中支持Nodejs以及Git，如果還沒有，那就開始安裝吧！ 安裝Node.js 下載Node.js參考地址：安裝Node.js 安裝Git...
摘要：搭建個(gè)人博客二更改博客主題上傳源代碼本文簡單介紹搭建博客。本文主要目的是對(duì)學(xué)習(xí)內(nèi)容進(jìn)行總結(jié)以及方便日后查閱。以后每次部署完一篇新的博文后，博客就會(huì)更新然后你還要要一下生成博客的程序代碼，以防萬一。 Hexo+GitHub 搭建個(gè)人博客（二）：更改博客主題、上傳源代碼 showImg(https://segmentfault.com/img/bV5VBL?w=800&h=400); ...
閱讀 2126·2021-11-23 09:51
閱讀 3712·2021-10-20 13:49
閱讀 1718·2021-09-06 15:13
閱讀 1828·2021-09-06 15:02
閱讀 3181·2021-09-02 15:11
閱讀 898·2019-08-29 15:37
閱讀 1744·2019-08-29 13:24
閱讀 2283·2019-08-29 11:28
