如何使用10個小時搭建出個人域名而又Geek的獨立博客？

12-31

如何使用10個小時搭建出個人域名而又Geek的獨立博客？

首先Fork或Download一份本項目代碼。
修改_config.yaml及about.md文件，以變更個人信息。
修改_include目錄下相關文件，以配置網站統計(analytics.html)，網友評論(comment.html)，右側欄目(categories.html),熱門文章(hot.html),友情鏈接(links.html)等。
修改CNAME文件，以綁定自己的域名。
刪除_posts下文章，換成你自己的。
去谷歌自定義搜索新建一個你的搜索引擎，把你的Id替換根目錄下search.html我的ID
最後，push到你自己的博客Repo~

源碼地址：GitHub - EZLippi/EZLippi.github.io

預覽：

摘要：我在這裡寫下長篇大論，只希望小白們能跟快速入門。堅持10個小時堅持10個小時堅持10個小時（重要的事情說三遍！！！）搭建出屬於自己的個人獨立博客，我將會通過 安裝流程主線+優質文章 作為參考。由於我本人是一名學生（非計算機專業），喜歡嘗試和不願意人與亦云想要不一樣的人生打小喜歡折騰便開始了搭建自己獨立博客的道路，這路上可謂是路途兇險和艱難費了我九牛二虎之力解決，還是不夠完美，但我希望他完美，希望他可以記錄我的時光。作為一名技術小白，沒有技術基礎。看到網上教程更是玲琅滿目直至眼花繚亂無從下手，講真，我從開始接觸到成功搭建花費了不低於100小時，走了很多彎路和誤區，希望通過本教程可以真心小白一個敢於嘗試的機會。我會將這篇教程寫仔細，會將我出現過的問題給予解決方法。

說明：教程來自我自己的博客如何使用10個小時搭建出個人域名而又Geek的獨立博客？可以為嘗試搭建博客道路上的朋友一個相對捷徑。

# 前言

天生倔強不願屈服的我，總受想做出一番成績來，不願意隨波逐流。我為什麼要在這個博客已經不盛行的時代去搭建屬於自己的博客？可以看看我之前寫的[《重新認識自己》](重新認識自己)和[《我為什麼那麼懶？》](我為什麼那麼懶？)。不去折騰怎麼能知道自己不行？未知的東西太多，需要我們去學習和掌握的數不盡數，唯有時刻保持這一份對新事物的好奇心並真心有心去堅持下去。

# 疑問

先給大家預覽下我的博客目前最終版**[視己慎獨](視己慎獨)**，很多人用 wordpress，你為什麼要用 github pages 來搭建？為什麼要搭建一個獨立博客?獨立博客與微信公眾平台有什麼區別？

- 1、無需購置伺服器，目前的blog掛載在Github Pages，免伺服器費的同時還能做負載均衡；github pages有300M免費空間，資料自己管理，保存可靠；學著用 github，享受 github 的便利，上面有很多大牛，眼界會開闊很多；github 是趨勢，像eleme這種互聯網大公司都在github上完成自己的項目；順便看看 github 工作原理，最好的團隊協作流程；你不覺得一個文科生用 github 很 geek 嗎？瞬間躋身技術界。

- 2、獨立的才是自己的。在知乎上有這樣一個話題[《GitHub 能作為衡量程序員能力的指標嗎？》](GitHub 能作為衡量程序員能力的指標嗎？ - 程序員)，在我看來獨立博客是喜歡嘗試新事物的人新一片天空，他們可以在這片天空中翱翔，他可以不太受拘束愛上些自由，他的內心因他的不羈和外表不屈，願意潛心研究深鑽其愛好，同時在這裡他可以結實一大批有著共同的愛好的追夢人。對於小白，請保持記得那份好奇心，堅持嘗試下去，繼續折騰。

- 3、公眾賬號是對所有人開放的，簡單申請即可使用，無需太多的挑戰。他僅僅只是一個平台（對一般人來說）同時好好做運營也似乎不是一件簡單的事情，沒有足夠的經歷和精力是很難達到一個高度，也很難去傳播你的文化價值觀念。博客也只是一個平台，但是這裡有你想要的，也是你的用武之地。公眾賬號是一個一對多的平台很難利於交流儘管現在越來越人性化，這點你的博客很輕鬆就可以做到。更多的區別在此不多分析。

# 成功方向

- 1、安裝準備軟體 Node.js、Git、GitHub DeskTop（前兩個必須安裝，後者可選）

- 2、本地搭建hexo框架、配置主題、修改參數、實現本地測試預覽

- 3、鏈接GitHub、實現在線預覽

- 4、購買域名並解析（這裡告訴大家一個方法，1元購買一個使用期限為一年.cn的域名 **僅高校學生可以** ）

- 5、日後站點的管理和運營

&> 紙上得來終覺淺，要知此事須舉行。世上無難事，就怕是懶人。以下以我的博客:http://blog.shijinrong.cn（http://shijinrong.cn是我一下行動）在windows下為例，教大家如何搭建一個獨立博客。

# 安裝流程

## 安裝準備軟體

- [Node.js](Node.js)

- [Git](Git - Downloads)

- [GitHub Desktop](GitHub Desktop) (可選)

以上幾個軟體均是英文版本，請小白不要害怕，敢於面對。安裝簡單，在此不做詳細介紹。

## 本地搭建hexo框架、配置主題

![Hexo 靜態博客搭建流程](http://7xpqdb.com1.z0.glb.clouddn.com/hexo.jpg)

#### 目錄

##### I.Hexo簡介

##### II.Hexo安裝方法

##### III.Hexo配置方法

##### IV.Hexo主題修改

##### V.Hexo部署方法

### I.Hexo簡介

Hexo 是一個輕量的靜態博客框架。通過Hexo可以快速生成一個靜態博客框架,僅需要幾條命令就可以完成,相當方便。

而架設Hexo的環境更簡單了不需要 lnmp/lamp/XAMPP 這些繁瑣複雜的環境僅僅需要一個簡單的http伺服器即可使用或者使用互聯網上免費的頁面託管服務

比如本人的這個博客就是託管於 GitHub Pages服務上

### II.Hexo安裝方法

參考官網[中文文檔](文檔 | Hexo),請嘗試者仔細讀教程和官方文檔。這步很簡單，正如官方網站寫的那樣只需要一條命令即可自動安裝hexo框架。

$ npm install -g hexo-cli #使用 npm 安裝 Hexo。

#### 初始化hexo

請參考hexo[官方文檔](建站 | Hexo),init命令中的``就是文件夾aierui.github.io。初始化後，aierui.github.io裡面就已經有完整的Hexo框架了,這裡可以在任意地方新建立一個文件夾並命名為aierui.github.io【不要問為什麼】打開該文件，點擊滑鼠右鍵你會看到一個Git bash here點擊跳出git的黑窗口，輸入命令

$ npm install

，完成後，指定文件夾的目錄如下：

![hexo初始化的目錄](http://7xpqdb.com1.z0.glb.clouddn.com/%E5%88%9D%E5%A7%8B%E5%8C%96hexo.jpg)

### III.Hexo配置方法

#### 熟悉hexo

為了讓讀者快速了解Hexo，我作幾個簡單介紹吧。當然，更多的還是需要仔細閱讀文檔才能了解更詳細。

+ _config.yml 全局配置文件。要注意的是，該文件格式要求極為嚴格，缺少一個空格都會導致運行錯誤。小提示：不要用Tab縮進，兩個空格符，冒號：後面只用一個空格即可*。

+ themes 存放主題的文件夾 + source 博客資源文件夾 + source/_drafts 草稿文件夾 + source/_posts 文章文件夾 + themes/landscape 默認皮膚文件夾

……

官方文檔中教詳細。

#### 配置hexo

做一些基礎配置即可，請參考配置[官方文檔](配置 | Hexo)，這裡也可以省略，因為在後面配置主題NExt是也有提到這裡的配置修改。

### IV.Hexo主題修改

Hexo主題非常多，可以參考豐富多彩的[Hexo主題](Themes | Hexo)，本文選Next為主題，樣式參考我的博客[視己慎獨](視己慎獨)。

到這裡我們還是採用參考[官方文檔](NexT - an elegant theme for Hexo.),5 分鐘快速安裝。在本地修改完這一連串的配置，（包括：語言設置、財產、菜單設置、側欄設置、頭像設置、作者名稱、站點描述、標籤雲頁面、分類頁面、統計系統、評論系統等等）現在是需要下面的一個命令即可在本地成功預覽你的博客樣式。

### V.Hexo部署方法

寫完文章之後就可以啟動本地伺服器測試了

$ hexo s #啟動本地伺服器測試

這個時候在瀏覽器中輸入http://localhost:4000埠靜態的網站架設完成

![效果如圖](http://7xpqdb.com1.z0.glb.clouddn.com/%E6%9C%AC%E5%9C%B0%E9%A2%84%E8%A7%88hexo.jpg)

當你修改好你想要的樣式，包括頭像，favicon圖標，標題樣式，第三方平台鏈接等等等等你心中完美的頁面。那就可以繼續下一個階段了。再提示一點，大家可以hexo主題修改一步就hexo s看下變化，初次接觸對參數不清楚。只有hexo s後在可以在本地瀏覽到效果，Ctrl+C 停止伺服器。

## 鏈接GitHub、實現在線預覽

#### 目錄

##### I.註冊GitHub

##### II.配置和使用 Github

##### III.SSH Key 配置成功

##### IV.實現在線預覽

現在已經來到第三部分了，請你在堅持一下。

### I.註冊GitHub

訪問：GitHub · Where software is built 註冊你的username和郵箱，郵箱十分重要，GitHub上很多通知都是通過郵箱的。註冊過程比較簡單,在此我不再啰嗦。界面任然是英文，請讀者耐心一點。

### II.配置和使用 Github

#### 配置 SSH keys

我們如何讓本地git項目與遠程的github建立聯繫呢？用SSH keys。

**檢查 SSH keys的設置**，首先我們需要檢查你電腦上現有的ssh key：

$ cd ~/.ssh 檢查本機的ssh密鑰

如果提示：No such file or directory 說明你是第一次使用git。

生成新的SSH Key：

$ ssh-keygen -t rsa -C "郵件地址@youremail.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):&<回車就好&>

注意1: 此處的郵箱地址，你可以輸入自己的郵箱地址；注意2: 此處的「-C」的是大寫的「C」

然後系統會要你輸入密碼：

Enter passphrase (empty for no passphrase):&<輸入加密串&> Enter same passphrase again:&<再次輸入加密串&>

在回車中會提示你輸入一個密碼，這個密碼會在你提交項目時使用，如果為空的話提交項目時則不用輸入。這個設置是防止別人往你的項目里提交內容。

注意：輸入密碼的時候沒有*字樣的，你直接輸入就可以了。

最後看到這樣的界面，就成功設置ssh key了：

![效果如圖](http://7xpqdb.com1.z0.glb.clouddn.com/ssh%20key.jpg)

#### 添加 SSH Key 到 GitHub

在本機設置SSH Key之後，需要添加到GitHub上，以完成SSH鏈接的設置。

1、打開本地C:Documents and SettingsAdministrator.sshid_rsa.pub文件。此文件裡面內容為剛才生成人密鑰。如果看不到這個文件，你需要設置顯示隱藏文件。準確的複製這個文件的內容，才能保證設置的成功。

2、登陸github系統。點擊右上角的 Account Settings—&>SSH Public keys —&> add another public keys

3、把你本地生成的密鑰複製到裡面（key文本框中），點擊 add key 就ok了

#### 測試

可以輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

如果是下面的反饋：

The authenticity of host "github.com (207.97.227.239)" can"t be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

不要緊張，輸入yes就好，然後會看到：

Hi aierui! You"ve successfully authenticated, but GitHub does not provide shell access.

#### 設置用戶信息

現在你已經可以通過 SSH 鏈接到 GitHub 了，還有一些個人信息需要完善的。

Git 會根據用戶的名字和郵箱來記錄提交。GitHub 也是用這些信息來做許可權的處理，輸入下面的代碼進行個人信息的設置，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的昵稱。

$ git config --global user.name "aierui"//用戶名 $ git config --global user.email "imland@outlook.com"//填寫自己的郵箱

### III.SSH Key 配置成功

本機已成功連接到 github。若有問題，請重新設置。常見錯誤請參考：

[GitHub Help - Generating SSH Keys](Generating SSH keys) 和 [GitHub Help - Error Permission denied (publickey)](http://help.github.com/articles/error-permission-denied-publickey)

### IV.實現在線預覽

#### 創建倉庫和本地遠程到GitHub倉庫

首先在GitHub上創建一個倉庫repository，注意倉庫名稱必須為http://aierui.github.io，也是你之前在本地建立的文件夾名稱 ![效果如圖](http://7xpqdb.com1.z0.glb.clouddn.com/astoneprepository.jpg)，這裡由於存在這個名稱的倉庫，無法重名。

# 將當前的改動暫存在本地倉庫 $ git add . # 將暫存的改動提交到本地倉庫，並寫入本次提交的注釋是」first post「 $ git commit -m "first post" # 將遠程倉庫在本地添加一個引用：origin $ git remote add origin https://github.com/username/projectName.git # 向origin推送gh-pages分支，該命令將會將本地分支gh-pages推送到github的遠程倉庫，並在遠程倉庫創建一個同名的分支。該命令後會提示輸入用戶名和密碼。 $ git push origin gh-pages

在GitHub上將gh-pages merge 到msater上

#### 添加部署代碼

在站點的-config.yml文件新增欄位

**Deployment 站點部署到github要配置這裡, 非常重要**

deploy: type: git 部署類型若有問題，其他類型自行google之 repository: https://github.com/Aierui/aierui.github.io.git branch: master plugins: -hexo-generator-feed

merge後就可以部署上去了，在Git命令黑窗口裡輸入

$ hexo g #生成靜態網頁 $ hexo d #開始部署

完成以上步驟，你算是成功了。在瀏覽器中輸入http://aierui.github.io（自己對應即可）看到了你在本地搭建的博客主頁一樣，哇哇哇哇哇哇。開心死你了，不要忘了回來給我點贊呀~

Enjoy~

## 購買域名並解析

這一環節相對簡單，可以參考[一步步在GitHub上創建博客主頁(3)](一步步在GitHub上創建博客主頁(3)),

### 一元搞定域名（重頭戲）

**僅限在校的高校學生，社會人士請自行繞開，老老實實花錢購買吧**

廢話少說，直接上鏈接看我是怎麼辦到的[一元搞定域名還送伺服器](【雲+校園計劃】 1元=免費域名+專享伺服器)，全體咆哮。我們大家一起歡呼一起咆哮吧，哈哈哈。

雲+校園計劃是騰訊云為在讀高校生量身打造的扶持計劃，旨在為高校生提供先進的技術支持、資金扶持和經驗分享。同時讓更多高校生了解雲計算及互聯網知識，為後續職業、創業發展奠定基礎。

**學生們請仔細研讀騰訊雲官方論壇領取的規則參與領取**

### 將獨立域名與 GitHub Pages 的空間綁定

#### DNS 設置

領取到域名後進行解析，進入到我的域名管理，添加域名，如下圖設置。我這裡設置了一個三級域名blog，大家可以自行忽略。設置後訪問的就是http://blog.shijinrong.cn了，不是http://shijinrong.cn喲~~~~

![](http://7xpqdb.com1.z0.glb.clouddn.com/astonepyuming.jpg)

其中A的兩條記錄指向的ip地址是github Pages的提供的ip

192.30.252.153
192.30.252.154

如博客不能登錄，有可能是 github 更改了空間服務的 ip 地址，記得及時到在GitHub Pages查看最新的ip即可

www 指定的記錄是你在 github 註冊的倉庫。

#### GitHub Pages 的設置

去到你的http://aierui.github.io 倉庫，點擊 CNAME(沒有自行創建) ,再點擊右下角的鉛筆編輯，將 http://blog.shijinrong.cn 改成你的域名

![](http://7xpqdb.com1.z0.glb.clouddn.com/astonepshijinrong.jpg)

域名綁定成功，域名解析成功，因此你在瀏覽中輸入http://aierui.github.io或者現在http://blog.shijinrong.cn均可以訪問到主頁。

**搭建成功**快和小白自己不願動手說拜拜吧，同時也恭喜你成為博主。記得常聯繫我喔~~嘻嘻

## 日後站點的管理和運營

### 如何更新博文

下載博客模板的ZIP，去到你frok的倉庫地址：GitHub · Where software is built你的用戶名/你的用戶名.github.io。點擊右下角的Download ZIP,你會得到一個名為「你的用戶名.github.io-master.zip」的壓縮包。

![](http://7xpqdb.com1.z0.glb.clouddn.com/astonepxiazai.jpg)

### 安裝 github desktop管理你的博文

這裡不再多贅述，可以看看官方文檔，有使用說明。

## 圖床

推薦使用[七牛](雲存儲首頁七牛雲存儲)（10G空間，免費，配合Markdown使用簡單）。

## MarkDown

百度一大堆教程，但是我還是推薦鎚子科技[鎚子便簽做的教程](鎚子便簽 - 鎚子科技)。代碼板塊的MarkDown請讀者自行學習。

# 參考資料

[1][如何在一天之內搭建以你自己名字為域名又具備cool屬性的個人博客](如何在一天之內搭建以你自己名字為域名又具備cool屬性的個人博客) by wingjay（推薦）

[2][一步步在GitHub上創建博客主頁(全系列)](一步步在GitHub上創建博客主頁(1)) by pchou（推薦）

[3][使用Github Pages建獨立博客](使用Github Pages建獨立博客) by beiyuu

[4][Hexo 靜態博客使用指南](Hexo 靜態博客使用指南) by 機智的阿卡林醬（推薦）

[5][如何搭建一個獨立博客——簡明 Github Pages與 jekyll 教程](如何搭建一個獨立博客——簡明 Github Pages與 jekyll 教程) by cnfeat（推薦）

[6]網站優化：[動動手指，不限於NexT主題的Hexo優化（SEO篇）](動動手指，不限於NexT主題的Hexo優化（SEO篇）) by ARAO"S BLOG（推薦）

[7][一步步在GitHub上創建博客主頁-最新版](一步步在GitHub上創建博客主頁)

[8][hexo你的博客](hexo你的博客) by ibruce

[9+]Thanks to the powerful Baidu and Google, let me solve the problem.

# 關於我

[## 大學生，腦洞大，敢嘗試，樂意思考，有夢想，不願隨波濁流]

[## 愛生活，會運動，敢拼搏，敢說敢做，有愛心，知道人情世故]

這裡有我更詳細的簡介：[ABOUT](about | 視己慎獨) 和[ME](重新認識自己)

如果你還想了解更多的我和我交流，可以關注我的微信公眾號「Astonep」。

![微信公眾號：Astonep](http://7xpqdb.com1.z0.glb.clouddn.com/astonepshijishendu.jpg)

來源自我的博客「視己慎獨」如何使用10個小時搭建出個人域名而又Geek的獨立博客？

自問自答……

覺得簡書真的是……聚集了太多「對技術有一些好奇但不會對其進行深入研究的小白」，一看到這種簡單而又友好的 step by step 入門教程就迫不及待地點贊。

我並不是因為自己是程序員所以會看不起小白之類的……從來沒有這種想法過。每個人都是這樣慢慢成長過來的。

但我看了太多小白，讀了這樣傻瓜式的文章後搭了一個博客，然後就沒了。真的蠻可惜的，為什麼不去好好使用這個博客呢？為什麼不順藤摸瓜地學一下怎麼用 Git 呢？既然都用到了 Hexo，為什麼不嘗試著學一學 node，學學簡單的前端技能，然後看看自己能不能製作一個自己設計的 Hexo 模板出來呢？

能做的事情有很多。如果你按照這篇文章搭建博客成功了，麻煩請不要止步於此。前端的技能隨著時間更新太快了，但總有些是值得學習和掌握的經典。

如果你只是想搭建一個博客，我還建議你能多嘗試不同的博客框架。Hexo 是很簡單，但你知道為什麼 Hexo 的開發者為什麼要做 Hexo 出來嗎？你知道 Hexo 這個名字的意思嗎？如果你會想到這兒，那就可以順藤摸瓜地去了解一下 Octopress 和 Jekyll 了。除此之外，你可能還會注意到，你搭建的博客大多都可以隨著設備屏幕尺寸的大小而自動適應。這就是網頁的 response 自動適配。為了保證能在不同尺寸的設備上有最佳的閱讀體驗，這一點非常重要。而許多的工具都可以輕鬆實現這一點——這時候我建議去 Udacity 或者其他公開課平台上選一門前端的基礎課程，能接觸到 HTML CSS 和 Javascript 的那種，順帶了解一下例如 Bootstrap 之類的輪子。

還有，如果你有打開我剛剛截圖裡頭那位題主（同時也是答主）的博客，你可能會發現打開的速度特別的慢。這時候可以打開你使用的瀏覽器的控制台，看看是在載入哪一類東西的時候花費了太多的時間，看是否能夠針對其進行優化。還可以進一步去了解一些設計上的細節：題主所使用的這個主題，應該是我見到的最多國人使用的 Hexo 主題了。原因不單單是因為清爽，我覺得還有很重要的，「對中文字體友好」。要知道，在網頁上展現好看的中文字體，還是需要花一些心思的。很多專註研究中文網頁排版的人都有過詳細論述，我就不班門弄斧了。

寫了上面這些不知所云的東西。但我真的希望，能夠對 Web 技術感興趣的人，不要把你此生最大的一個項目停留在一個簡單的靜態博客上。這真的蠻無聊的，即不 Geek 也不有趣。

而且也根本用不了 10個小時。。

--- update---

距離石同學建好他的博客，發布他的第一篇文章（也是唯一一篇）20天了。

不知道他還有在堅持學技術嗎？

我又順手過去點開了他的 GitHub 主頁，發現他從那一天開始再也沒有提過 push。

大概可以認為他這段時間都沒有再寫代碼？（也有可能是在本地寫了沒有提交，不過作為剛接觸 GitHub 的新人，一般來說應該會再保持熱情一陣子……）

我總感覺 Programmer 這個身份在一些人眼中變得毫無門檻了。誠如評論區有人所言，並不是所有人都要學編程。但石同學應該是想學編程的吧。

Programmer 說到底還是屬於工程師這樣的職業。是需要持續練習，持之以恆的。在網路上寫科普文章，可以給你帶來 like 和 upvote，可以讓你感受到成就感。但從自身技能積累的角度來說，其實並沒有多少幫助。

建微信群也不能。

原來現在用 Hexo 搭個博客就叫 Geek 了啊。

本來只是隨便吐個槽而已……既然答案排前面了，還是寫點內容

@石金融針對搭建 Hexo 寫一篇文章還是很不錯的，我也喜歡記錄自己折騰各種東西的過程。只是，「Geek」在我看來，必須在某個方面有創新，才能算。就以搭建 Hexo 博客為例，搭建的教程已經泛濫了，並沒有什麼新東西。但是很多人給 Hexo 做主題啊，這個就是 Geek 了。另外一個常用的博客框架 jekyll，當初有人嫌部署太麻煩，寫了一個工具來簡化部署，這也是 Geek。

一段微小的評論，謝謝大家。

其實半個小時就夠了

註冊 github 賬號

fork barryclark/jekyll-now · GitHub 這個 repo

把 repo 的名字改為 http://yourusername.github.io (yourusername 表示你的 github 的賬號名)

在 repo 里新建 CNAME 文件，內容為你需要綁定的域名

在域名解析里設置 CNAME 指向 http://yourusername.github.io

done!

如果是高手請略過此答案，如果同是小白，給出以下建議。

前言：（長文沒耐心看的看粗體步驟即可）文筆有限，各位勉強看看哈！

已經大四了，在大二大三時常常在各種優秀的設計網站遊盪，逐漸的發現似乎外國的優秀設計師都擁有個人的一個網頁，有的很簡潔，內容很直白，有的視覺設計很唯美。在那一刻，雖然作為一名文科生藝術生，也下定了自己要建一個屬於自己的網頁，那時是14年底，為了鼓勵自己建站，經過搜索後就堅決的在萬網買下了自己的域名DAIWENQIANG-圖案設計。在期間為了不讓域名浪費，從綁定在輕博客lofter折騰到為了找工作放作品綁定到了strikingly，如今經過了一年多的拖延，終於在每天實習下班後的每天晚上回到宿舍慢慢折騰近一個月，從香港的主機轉到國內的主機並且備案，期間遇到問題不斷谷歌百度，因為知道在這個時刻只有自己能夠幫到自己。終於在過年到家後，經過了可視化編輯模塊的大改版，與此同時的每日活動和文章為網頁添加內容。

折騰過程（lofter-strikingly-wordpress）：當自己入門設計後，對網路的依賴性直線上升，而到了大三開始，希望能有自己的一席之地，展示自己的空間，開始折騰著網路平台的展示。從網易博客開始，但當時發現自己並寫不出什麼文章，發現比較適合圖片展示的方式，開始轉到loffter輕博客的圖片社交，吸引我的是可綁定自定義域名（但我不喜歡的是，非loffter打開網頁會彈出lofter顯眼的廣告，後來放棄），與此同時發現了輕博客的鼻祖tumblr湯博樂（但發現在國內的部分地區寬頻被牆，不能保證對方能進入，但好處就是！！沒有顯眼令人厭煩的廣告）。再後來為了求職用的個人作品展示找到的strikingly一站式品台建站（試用期過後綁定自定義域名需要繳費約40-60刀/月，高昂的費用，在自己建站後隨之放棄）。

從2015年12月開始，確定了用wordpress建站，搜索各種教程，各種案例。從零基礎開始了建一個wordpress博客網站。

目前自己所花的費用，阿里雲（萬網）域名59￥/年，阿里雲虛擬主機免費2年至17年5月，兩年後約300￥/年。長期費用約350￥/年。
接下來是建設中可能用到的費用，在wordpress網站程序中有近百個免費的模版（類似博客的自定義功能）
在前期我也是使用免費模版，後期需要可視化編輯的話就需要從網路下載較大的模版或者購買新的wordpress模版。
建好模版後採用七牛雲CDN加速以及鏡像加速。

以下為虛擬主機圖片，在購買虛擬主機時需要選擇LINUX或者WIN主機，wordpress只支持在LINUX主機中安裝。

步驟：

1.本地建站測試

後得知可以現在本地建站嘗試，直到滿意後再購買主機安裝程序和上傳模版，這樣的方式可以避免建站期間對主機的有效期的浪費。

以及在備案期間網站和空間是不能操作的，也可以本地測試後，等備案通過，直接上傳編輯好的網站模塊即可，節省時間。

到wordpress官網：WordPress ? China 簡體中文下載軟體，運用軟體XAMPP把自己的電腦變成伺服器，讓網頁本地運行。

具體運用，百度搜索：用XAMPP來搭建Wordpress建站環境

2.購買域名

我是通過萬網購買的域名，價格從20￥/年到80￥/年不等，也有很多國內外網站提高域名出售，或者有部分的網站提供免費域名。

3.購買空間

根據初步搜索的來自wordprsdd大學網站的推薦：1阿里雲——2Linode——3恆創主機——4優易主機——5老薛免備案主機——6維翔主機

可以自己多在網路中多搜搜各類主機的評價和使用感受。

在沒備案之前，我使用的是老薛主機的香港主機，當時第聖誕節優惠，99一年，比較方便的是支持一鍵安裝wordpress程序。正常虛擬主機費用大約是150-300一年。

後來是為了想使用七牛雲的CND加速和鏡像加速（需要網站已備案），也想著網頁想長久的用下去，就開始了備案。

在阿里雲的免費虛擬主機，網站內存1G，月流量10G，也夠用了，網站中有詳細的備案流程，大約10-20天完成備案。

4.安裝wordpress程序

一、在部分主機服務商例：老薛主機的cPane後台程序中，支持一鍵安裝wordpress程序，比較便利，cPane里包含的文件管理工具，也比ftp類的工具方便。

可惜國外空間不能再國內備案，，還是很不甘心的放棄了。

二、我用的阿里雲虛擬主機，需要通過ftp工具進行wordpress程序上傳，那就得先在自己的電腦安裝ftp傳輸工具，工具很多種，搜索下即有，我用的是FileZilla，

如圖，可搜索「FileZilla如何使用」「FileZilla如何上傳wordpress程序」。充分利用搜索引擎的偏離，和網路中熱心人士的分享。

在上傳前需要在wordpress文件中輸入自己主機資料庫的賬號密碼。詳細搜索具體步驟。

5.域名解析到主機

解析步驟並不困難，就是把域名與主機連接起來，我常說，域名就想是門牌，空間就是房子。把門牌掛到房子上，別人才能找到你。

域名解析有大左右。我一共解析了4個，其中就是http://www.daiwq.com/和daiwq.com這樣算一個，

然後一個主域名例http://daiwq.com 旗下可以設置很多個二級域名，例如http://wq.daiwq.com ， http://xxx.daiwq.com ，xxx為任意字母

解析1，把http://daiwq.com和DAIWENQIANG-圖案設計都解析到我的主機上，都可以打開我的網頁。

解析2，把域名解析到qq郵箱的域名郵箱，就例如我的info@daiwq.com 就擁有自己獨立的郵箱名稱。xx@daiwq.com（xx為任意字母）——備不備案都可以

解析3，把二級域名http://mail.daiwq.com解析到QQ郵箱訂閱郵箱，，在我網頁下端訂閱郵件的功能，就由此郵箱為發送地址，每逢有新文章就會發送到訂閱的郵箱里。

解析4，把二級域名http://wq.daiwq.com解析到七牛雲空間（前提是已備案），達到所有網頁中的圖片都存放在空間之外，節省主機空間的使用，並結合CDN加速，鏡像加速，使網頁的速度加快。

如圖：wordpress後台界面：

6.wordpress插件運用

Disable Google Fonts ——解決wordpress默認的谷歌字體拖慢網路速度。

googlefonts to 360——將谷歌字體替換成360字體

LayerSlider WP——響應滑塊圖片功能

Smartideo ——是為 WordPress 添加對在線視頻支持的一款插件（支持手機、平板等設備HTML5播放）。目前支持優酷、搜狐視頻、土豆、56、騰訊視頻、新浪視頻、酷6、華數、樂視、YouTube 等網站。

Video Thumbnails——自動為視頻提取視頻截圖並生成圖片

*WP Super Cache——為網站提供緩存加速，並結合七牛雲CDN加速，是網頁速度大大提升

WP-CopyProtect [保護您的博客文章]——這個插件會保護你的博客內容[文章]被複制。一個簡單的插件阻止文章被複制。

WP-PostViews——為你網站的文章提供閱讀次數統計

WPJAM 七牛鏡像存儲——使用七牛雲存儲實現 WordPress 博客靜態文件 CDN 加速！

多說——追求最佳用戶體驗的社會化評論框，為中小網站提供「新浪微博、QQ、人人、豆瓣等多帳號登錄並評論」功能。「多說」幫你搭建更活躍，互動性更強的評論平台，功能強大且永久免費。

統計類：一開始是使用CNZZ統計，，後回家後來莫名其妙的怎麼都打不開統計的網站，

就改用百度統計了，統計每天的詳細流量，地址，性別，系統，屏幕大小，停留時間。

監控類：監控寶，監控每天網頁的打開時間，網站狀態。

——————end——————

答案中如有問題請大家多多指出！

網站:DAIWENQIANG-圖案設計

花幾十塊錢買個域名，跳轉(解析)到你的qq空間

以個人經歷說一下吧

有一個域名是13年五月份註冊然後備案完成好像實在七月份，這幾年一直在做的是別的內容，但是15年9月份的適合突然想把它做成一個個人的博客，記錄一下生活和技術學習的過程。

中午吃飯的時候想了一下具體的頁面設計，趕快要做就做個與眾不同的，富有文青氣息的博客，於是就決定了前端的Js動畫一定要做個特別文青的，然後最好每篇文章都要有好看的封面圖。

整個下午都在寫Js，然後又不想用jQuery這些框架，就寫了五百多行原生代碼，實現了移動和PC端的屏幕自適應和放大縮小瀏覽器自動調整的動畫。

晚飯沒吃，用PHP寫了個簡單的後台，然後創建了個簡單的資料庫。

晚上把音樂播放功能給寫了，做了個播放動畫和進度什麼的。然後就把代碼部署到了新浪雲上。

總耗時十個小時左右吧。哈哈現在一直在用著，然後一直添加新功能和改bug，已有一百多篇博客，基本每天都在寫

寫博客確實加深了對很多問題的理解啊！

想想還是匿了吧哈哈

###############

取匿了

mac電腦,參考這篇教程

5分鐘搭建免費個人博客

yelee主題文檔

Yelee 主題使用說明 · GitBook

本人github+hexo博客效果展示

如何用github