為什麼要有自己的個人網站呢?
我覺得現在身處於網際網路時代,有自己的個人網站其實就和名片差不多了,在這裡可以不斷的記錄自己的生活,總結自己的知識,人生思考什麼的,以後介紹自己直接把網站扔給對方。一來是可以裝下逼,二來是可以讓對方更好的瞭解自己。
再者就是相對的自由了,現在市面上有很多 Blog 系統,你只要註冊一下,就可以直接在他們的平臺生成一個你自己的blog,雖然很方便,但是你要付出的代價就是:忍受他們平臺在你的blog嵌入一堆廣告。受他們的限制與監管,人家不爽就隨隨便便刪了你的文章,沒商量。
比如這樣:
爽嗎?反正我是不爽。
所以自己搞一個完全屬於自己的網站,相對來說,沒那麼苦逼。為什麼說相對? 因為我們也要看大佬的眼色啊。
但是總比被各種平臺噁心好吧。也別幻想什麼區塊鏈部落格系統,對於目前來說,不現實。
使用 Hexo 框架來搭建個人網站
這兩天我重新整理了一下自己的 Blog ,因為我之前用的是 Octopress 框架,有些年頭了,一些主題和外掛並不是很多。
後來對比了幾個框架,發現 Hexo 不錯,和 Octopress 差不多,也是可以用 Markdown 寫文章,然後生成靜態網站,不過主題豐富一些。
Hexo 是基於 nodejs 的,搭建起來很簡單。那麼接下來就說說如何從0開始搭建吧。
開始搭建
-
因為 hexo 是基於 node 框架的,所以呢,我們首先需要下載安裝node,下載地址:nodejs
-
安裝完之後,我們開啟命令視窗,輸入 node -v ,如果返回下圖所示,那麼就說明你安裝node成功了。
-
安裝成功後,我們在命令列視窗執行如下命令來安裝hexo:
npm install hexo-cli -g 複製程式碼
-
初始化部落格目錄:
hexo init wistbean.github.io (這裡的wistbean換成你自己的英文名) 複製程式碼
-
初始化完成後,我們就進入我們的目錄:
cd wistbean.github.io 複製程式碼
-
安裝
npm install 複製程式碼
-
clean一下,然後生成靜態頁面
hexo clean hexo g 複製程式碼
g 就是
generate
,生成的意思
-
把你的網站執行起來
hexo s
s 就是
server
,在伺服器執行的意思
- 開啟你的瀏覽器,輸入
localhost:4000
。 自此,你的個人網站就這麼速度的搭建起來了!
讓你的個人網站漂亮的 blingbling 的
修改你的網站中的個人資訊
進入你的網站目錄,開啟 _config 檔案,這個檔案是用來配置你的網站資訊的。
這裡列出我的簡單配置,具體可以看這個文件
title: wistbean
subtitle: 肯定會
description: wistbean的個人部落格,主要涉及到程式設計(Java,Python,Linux等),個人提升學習,視訊教程,《肯定會軟體技術》電臺節目
keywords: wistbean,肯定會,java,python,電臺,教程
author: wistbean
language: zh
複製程式碼
選一個主題
剛搭建完的網站,是不是覺得有點醜,不符合你的漂亮的臉龐? 反正我是這麼覺得的,那麼就選一個主題來裝飾一下吧,在這裡可以選擇你要的主題:hexo主題
下載主題
選擇好了你的主題之後,就可以下載主題資源了,比如我這裡選擇一個 NEXT 主題來演示一下:
git clone https://github.com/iissnan/hexo-theme-next
複製程式碼
這裡主要就是將主題下載到我們的themes目錄下。
如果你還不熟悉 Git 的使用的話,可以看看我之前的 Git 視訊教程:程式碼託管Git的使用
配置主題
主題下載完之後,在你根目錄下的 _config.yml 檔案中,修改 theme 為你的主題名字:
theme: next
複製程式碼
重新生成和執行
hexo g
hexo s
複製程式碼
訪問一下看看,是不是比之前好看多了?
寫上你的第一篇部落格文章,打上標籤和分類
你已經把你的網站打扮的漂亮大方簡潔惹人愛了,那麼接下來就要好好去寫內容了,內容才是重要的。
兩種方式來新建你的博文
命令形式
在你的blog目錄下使用如下命令:
hexo new article (這裡的article寫上你的文章的名稱)
複製程式碼
輸入這樣的命令之後你的source/_posts下就會生成一個 article.md 檔案,在這個檔案下就可以寫上你的部落格內容了。用 Markdown 的語法去寫。
直接新建方式
直接點的方式就是直接在source/_posts
新建一個 Markdown 檔案,其實和命令形式是一個道理,只不過命令形式用了命令來建立。推薦使用命令的方式,畢竟 Geek 一點。
給你的文章打上標籤
打標籤能讓你的文章方便檢索。
開啟標籤功能:
hexo new page tags
複製程式碼
這時候你的source/下生成 tags/index.md 檔案,我們將其開啟,然後把它改成:
type: "tags"
comments: false
複製程式碼
這時候你要為你的文章打上標籤就可以在文章的頭部寫上:
tags:
- Tag1
- Tag2
- Tag3
複製程式碼
給你的文章新增分類
分類,歸檔,是你部落格的特性之一。
開啟分類功能:
hexo new page categories
複製程式碼
這說你的source目錄下生成 categories/index.md 檔案,我們將其開啟,把它改成:
type: "categories"
comments: false
複製程式碼
這時候你就可以給你的文章歸類存檔了,使用方式就是在你的文章的頭部加上:
categories:
- 分類1
- 分類2
複製程式碼
注意:標籤和分類要確定你的配置檔案 _config.yml 是否有開啟了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的語法是寫作最優雅最簡潔最簡單的,如果之前沒用過的建議去學一下Markdown 語法說明,一般一個鐘左右就能掌握。因為它和HTML那樣簡單。
給你的文章新增評論
當別人看了你的文章,有問題想跟你探討,沒評論怎麼行?評論也是你的 Blog 互動的重要方式之一。
現在很多主題都內建了第三方評論的系統。比較常用的有:
- 多說 :duoshuo.com/
- 暢言 :changyan.kuaizhan.com/
- Valine:github.com/xcss/Valine
- Disqus:disqus.com/
- 友言: www.uyan.cc/
- gitment: github.com/imsun/gitme…
自己去看一下,喜歡哪個用哪個,自己的 Blog 就是要自由。
選好你的評論系統之後,進入平臺註冊後,平臺會給你一個 APPID和appkey。拿到這些資訊到你的主題下的配置檔案下設定。
以 next 主題和暢言評論為例:進入你的themes/next
,開啟_config.yml,定位到 changyan ,把 enable 改為 true。
changyan:
enable: true
appid: 這裡寫上你的暢言在appid
appkey: 這裡寫上你的暢言在appkey
複製程式碼
設定好之後,重新clean生成一下就有評論啦:
hexo clean
hexo g
hexo s
複製程式碼
開啟你的預覽連線看看你的文章下方,已經有評論功能啦。
讓全世界的人都認識你
已經搞定了個人blog,接下來當然是要部署到網上讓人家訪問了,如果不想花錢,可以使用GitHub Pages
,使用它就可以部署自己的網站啦。
對於 GitHub 不知道怎麼用的童鞋,可以看一下我的這個視訊教程:GitHub完全使用指南
建立Github pages 倉庫
接著建立一個 xxx.github.io 的 public 倉庫,這裡的xxx寫你的名字,比如我寫的是 wistbean.github.io,那麼到時我就可以通過 wistbean.github.io
來訪問我的網站了。
建立完成之後,那麼你就有自己的 Git 地址了。
安裝 hexo-deployer-git
在你的部落格目錄下輸入如下命令:
npm install hexo-deployer-git --save
複製程式碼
配置你的Git
開啟你的配置檔案,然後輸入你的git地址:
deploy:
type: git
repo: https://github.com/xxx/xxxx.github.io.git
複製程式碼
推送你的網站到Github上
直接輸入命令 : hexo d
d 就是 deploy , 部署上去的意思。
訪問你的網站
直接在瀏覽器輸入你的 xxx.github.io
就可以訪問啦!
要有點個性,綁上你的域名
有了自己的網站,當然是要自己的網址,這樣才帥嘛,當然有自己的伺服器就更帥了。
購買域名
關於域名的購買我比較推薦去godaddy,這是國外的域名商,使用起來不錯的。
繫結域名
買完你的域名之後,接下來幾個步驟輕鬆搞定:
新增 CNAME 檔案
在你的部落格的 sources 目錄下新建一個 CNAME 檔案,這個檔案裡面就寫你的域名就可以了,比如我就寫: www.wistbean.com。 接著將檔案push到你的GitHub上,可以使用 hexo s
命令。
在你的域名商後臺進行 DNS 解析新增兩條記錄:
1. 主機記錄: @
記錄型別:A
記錄值:192.30.252.154 或者 192.30.252.153
2. 主機記錄: www
記錄型別: CNAME
記錄值: xxx.github.io (這裡就是你的github倉庫名稱)
複製程式碼
GitHub 設定域名
在你的 GitHub 設定域名,在你的 GitHub 部落格專案中點選 Settings,在 GitHub Pages 下的 Custom domain 寫上你的域名,然後 save。
以上,你就可以通過你自己的域名訪問到你的網站啦!
伺服器搞起,完全自主權
雖然你現在已經可以使用你的域名訪問你的網站,但是呢,有自己的伺服器託管自己的網站還是爽一點的,GitHub遮蔽了百度的爬蟲,也就是說別人通過百度搜尋不到你的網站,這你能忍?
有自己的伺服器的話就可以被更多搜尋引擎收錄,還有呢就是有自己的伺服器還可以幹些其它的事情。
購買伺服器
這裡的伺服器當然推薦要買國外的,這樣的話你的域名就不需要備案,而且還可以搭建 VPN ,一舉三得,酸爽。
伺服器購買推薦使用搬瓦工,因為這是我用過覺得價效比最好的,而且呢,還可以領取到優惠碼,很多人不知道的,領取優惠碼可以看這裡:拿到搬瓦工優惠碼
使用 Nginx
買了伺服器之後,那麼你就可以用 Nginx 來當做你網站的 web 伺服器,搭建也很簡單,關於Nginx搭建和配置就不多說了,如果之前沒玩過可以看這裡:Nginx搭建靜態網頁伺服器
DNS解析到你的伺服器
在你的域名商,使用 DNS 解析,新增一條 A 記錄就可以了,記錄值就是你這臺伺服器的 IP 地址,一般啟用後 30 分鐘左右就可以訪問啦。
以上你就完全擁有屬於自己的個人網站啦。