2. 程式人生 > >從零開始搭建屬於自己的部落格

從零開始搭建屬於自己的部落格

阿新 • • 發佈：2019-01-03
  • 環境：Mac OS X Yosemite
  • 版本：10.10.5
  • 前言：綜合前輩經驗，歷經磨礪，終於成功部署了屬於自己的部落格網站，將其整個思路整理出來，希望對有需要的人有所幫助。由於撰寫比較倉促，描述得可能不夠仔細，有問題歡迎留言交流！
  • 目錄：

1. 註冊Github，建立Repository

開啟網址：https://github.com， 註冊屬於自己的Github賬號，擁有賬號後再登入賬號進入Repositories中建立一個以自己使用者名稱+”.github.io”建立的repository（倉庫），如我的使用者名稱為xiaoyaoyou1212，那麼建立的倉庫名為xiaoyaoyou1212.github.io，這樣我們就有了GitHub預設分配給每個使用者的二級域名，如我的GitHub二級域名是

http://xiaoyaoyou1212.github.io。
有了這個二級域名後，我們就可以利用GitHub的免費站點部署自己的個人網站，本文準備利用Hexo這個靜態框架搭建自己的個人部落格，如果你已擁有自己的CSDN部落格，那麼你可以利用GitHub的免費站點作為中轉站進行跳轉，具體設定如下：
1、在目錄下新建資料夾，clone GitHub中的程式碼到本地，具體命令如下：git clone https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git，這個執行的前提是本地已經安裝好git，如果沒有安裝，可略過先看以下步驟，後面有詳細講解；
2、新建index.html檔案，該檔案內容如下(為了描述方便，跳轉連結是我的CSDN部落格，替換為你的CSDN部落格地址就行)：

<!DOCTYPE html>
<html>
    <script>
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i
 
) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
            window.location.href="http://blog.csdn.net/xiaoyaoyou1212";
        } else {
            window.location.href="http://m.blog.csdn.net/blog/index?username=xiaoyaoyou1212";
        }
    }
    browserRedirect();
    </script>
    <body>

    </body>
</html>

3、上傳本地檔案index.html到GitHub，按順序執行以下命令，命令如下：

git pull //獲取GitHub上最新程式碼，此處因為是第一提交，可以忽略
git add . //添加當前目錄下的所有檔案到git本地倉庫，注意最後的“.”
git commit -m "描述"  //提交本地檔案到git本地倉庫
git push //push本地檔案到GitHub倉庫

4、訪問你的GitHub提供的二級域名地址，是不是已經成功跳轉到你的CSDN部落格地址了，就是這麼簡單

2. 註冊域名（可選）

開啟阿里雲服務的萬網網址：https://wanwang.aliyun.com，查詢自己想註冊的域名是否存在，如果該域名還未被註冊，那麼恭喜你，你可以用這個名字申請一個.com的頂級域名，首次註冊第一年的費用是45元，是不是很便宜，哈哈，就是這麼便宜，所以現在的域名滿天飛咯，找到一個好記又短的域名非常難了，不過只是自己的個人網站域名長點倒也無所謂啦，像我的域名http://www.xiaoyaoyou1212.com就很長而且還有數字，是不是感覺很不規範，主要還是因為這個賬號自己很多地方用到了，還是有點感情的啦！好了，說了這麼多，下面正式進入利用Hexo打造專屬自己的個人網站。

3. 安裝brew

brew又叫Homebrew，是Mac OSX上的軟體包管理工具，能在Mac中方便的安裝軟體或者解除安裝軟體，只需要一個命令，非常方便，brew類似ubuntu系統下的apt-get的功能；brew的官方網站：http://brew.sh/在官方網站對brew的用法進行了詳細的描述；安裝方法：在Mac中開啟Termal輸入如下命令：ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"。

4. 安裝Git

由於安裝了brew，所以此處很簡單啦，只需要執行如下命令就行：brew install git，安裝完後使用命令git --version進行驗證，如果輸出了git的版本號則說明git已經安裝成功，可以放心使用了！

5. 安裝Node

安裝node前，需要先安裝npm工具，npm是一個node包管理和分發工具，已經成為了非官方的釋出node模組（包）的標準，有了npm，可以很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。
安裝npm的命令如下：brew install npm，安裝完後可以使用命令npm -v看是否顯示版本號來進行驗證。
安裝node的命令如下：npm install -g node，-g表示全域性安裝，同樣安裝完後可以使用命令node -v來進行驗證。

6. 安裝Hexo

輸入命令npm install -g hexo進行安裝，安裝完後選擇一個目錄新建資料夾blog，進入blog目錄，執行命令hexo init，以後blog這個目錄就是整個網站的根目錄，以後所有的操作都在該目錄下進行。
執行命令hexo generate(或hexo g)生成靜態頁面，再執行命令hexo server進行服務啟動，在瀏覽器中輸入http://localhost:4000就可以訪問了，不過別急，這個還只是Hexo預設的風格哦，還需要進行一些個性化設定才符合自己的口味嘛！下面就詳細講解怎麼通過一些配置打造個性化的網站風格。

7. 配置Hexo

網上提供了很多支援Hexo的主題，可以按照個人喜愛選擇一個，我選擇的是yilia，為啥選擇這個，就是第一眼感覺最滿意就選擇了，下面我將依據yilia主題進行配置的講解。首先進入blog目錄，執行命令git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 下載該主題到本地，修改_config.yml中的theme: yilia.以下是yilia的配置檔案，由於註釋符“#”在markdown中有其他用途，所以都以“//”進行替換進行展示說明，你可以按照註釋修改為自己想展示的效果，如果你選擇的是其他主題，那麼就按照主題作者提供的配置檔案進行相關修改，其實都大同小異。

//Header
menu:
  主頁: /
  所有文章: /archives
  隨筆: /tags/隨筆
  相簿: /picture
//SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  //zhihu: "#"
  //douban: "#"
  //mail: "#"
  //facebook: "#"
  //google: "#"
  //twitter: "#"
  //linkedin: "#"
rss: /atom.xml
//Content
excerpt_link: more
fancybox: true
mathjax: true
//是否開啟動畫效果
animate: true
//是否在新視窗開啟連結
open_in_new: false
//Miscellaneous
google_analytics: ''
favicon: /favicon.png
//你的頭像url
avatar: 
//是否開啟分享
share_jia: true
share_addthis: false
//是否開啟多說評論，填寫你在多說申請的專案名稱 duoshuo: duoshuo-key
//若使用disqus，請在部落格config檔案中填寫disqus_shortname，並關閉多說評論
duoshuo: true
//是否開啟雲標籤
tagcloud: true
//是否開啟友情連結
//不開啟——
//friends: false
//開啟——
friends: true
//是否開啟“關於我”。
//不開啟——
//aboutme: false
//開啟——
aboutme: 個人介紹

8. 部署及釋出

前面所講解的都是依據本地進行訪問，如果需要將自己的網站部署到GitHub上，並且能通過自己申請的域名進行訪問的話，那麼還需要進行一些相關的配置。首先，需要修改_config.yml檔案中的deploy屬性

deploy: 
  type: git
  repo: https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git
  branch: master

再執行命令npm install hexo-deployer-git --save；然後需要配置下SSH，步驟如下：
1. 設定使用者名稱：git config –global user.email “[email protected]” config --global user.name "xxx"
2. 生成金鑰：ssh-keygen -t rsa -C "[email protected]"
3. 找到使用者目錄下.ssh目錄下生成的兩個檔案id_rsa和id_rsa.pub，用文字編輯器開啟ssh.pub檔案，拷貝其中的內容，將其新增到GitHub Add SSH Key
4. 執行命令ssh -T [email protected]進行驗證
5. 執行命令hexo g進行部署，再執行命令hexo d進行釋出，釋出成功後，在瀏覽器中輸入你Github的二級域名，如：https://xiaoyaoyou1212.github.io就可以看到你釋出的網站了，不過如果想通過你申請的一級域名來訪問的話還需要在你的blog的source目錄下新建CNAME檔案，裡面輸入你的域名地址，再進行部署及釋出就行。
附：
每次部署的步驟，可按以下三步來進行：

hexo clean
hexo generate
hexo deploy

常用命令：

hexo new"postName" #新建文章
hexo new page"pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠（預設埠4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub
hexo help # 檢視幫助
hexo version #檢視Hexo的版本

常用複合命令：

hexo deploy -g
hexo server -g

簡寫：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

9. 常見問題

  1. ERROR Deployer not found: git 或者 ERROR Deployer not found: github，執行命令npm install hexo-deployer-git --save；
  2. ERROR Process failed: layout/.DS_Store, 那麼進入主題裡面layout和_partial目錄下，執行刪除命令rm -rf .DS_Store；
  3. ERROR Plugin load failed: hexo-server，執行命令：sudo npm install hexo-server；
  4. 執行命令hexo server，提示：Usage: hexo ….，執行命令：npm install hexo -server --save，提示：[email protected] node_modules/hexo-server….，這個時候再執行：hexo server；
  5. 如果輸入ssh -T [email protected]出現錯誤提示：Permission denied (publickey).因為新生成的key不能加入ssh就會導致連線不上github。解決辦法如下：先輸入ssh-agent，再輸入ssh-add ~/.ssh/id_key，這樣就可以了；如果還是不行的話，輸入ssh-add ~/.ssh/id_key命令後出現報錯Could not open a connection to your authentication agent.解決方法是key用Git Gui的ssh工具生成，這樣生成的時候key就直接儲存在ssh中了，不需要再ssh-add命令加入了，其它的user，token等配置都用命令列來做；最好檢查一下在你複製id_rsa.pub檔案的內容時有沒有產生多餘的空格或空行，有些編輯器會幫你新增這些的。

10. 參考連結

相關推薦

從零開始搭建屬於自己的部落格

環境：Mac OS X Yosemite 版本：10.10.5 前言：綜合前輩經驗，歷經磨礪，終於成功部署了屬於自己的部落格網站，將其整個思路整理出來，希望對有需要的人有所幫助。由於撰寫比較倉促，描述得可能不夠仔細，有問題歡迎留言交流！ 目錄： 1.

從零開始搭建屬於你的React/redux/webpack腳手架

大家好，我是蘇南，今天要給大家分享的是<<我的react入門到放棄之路>>,當然，也不是真的放棄啦～～哈哈，這篇部落格原本是從17年初寫的，一直沒有在csdn釋出，希望今天不會太晚，望各位老司機勿噴！ 上圖可以找亮點，留言答對有獎哦～

從零開始 製作屬於自己的HTTP介面測試框架(一)

第一次嘗試做長部落格，決定以HTTP介面測試框架為主題，名字暫定為Fairy Client，開發語言使用Java 初步決定這個框架應該具備這樣幾個功能 1.使用註解進行介面請求 2.請

如何從零開始搭建自己的部落格（通俗易懂）

序 作為一名合（zhuang）格（bi）的程式猿，經常寫點東西，肯定少不了各種網站、部落格，通俗的CSDN，文藝的簡書，強大的GitHub，以及微信、掘金、知乎等等風格迥異的平臺。不過，再多的地方，也容不下一顆想捯飭的心，不管什麼網站，都有自己固定的模板，統一的風格，這怎麼

一、從零開始搭建自己的靜態部落格 -- 基礎篇

目錄 1. 準備環境 2. 新建專案 3. 第一篇博文 4. 修改配置檔案 5. 本地構建和訪問 6. markdown解析異常 6.1. Markdown包的

二、從零開始搭建自己的靜態部落格 -- 主題篇

目錄 1. 下載主題 2. 使用主題 2.1. 基本配置 2.2. 高階配置 2.2.1. 配置網站圖示 2.2.2. 更新Font Awesome的版本 2.

從零開始搭建部落格02----發表部落格個人中心

頭部登入狀態 shiro標籤的引用 由於shiro標籤不是html的原生標籤，所有我們需要先引入一個額外的依賴，shiro的標籤庫(thymeleaf的拓展標籤)。 <dependency> <groupId>com.github.thebor

從零開始搭建wordpress部落格

一、開發環境 Ubuntu16.04 64 LAMP環境 wordpress4.9.8 二、具體執行步驟 2.1、安裝LAMP環境 （1）安裝MySQL apt update && apt upgrade # 需要輸入mysq

SpringBoot2.x｜從零開始搭建個人部落格（一）

專案Init 通過IDEA開啟專案後，創建出以下的檔案結構。 ｜- - blogs        ｜- - src               ｜- - main                      ｜- - java     

從零開始搭建自己的VueJS2.0+ElementUI單頁面網站（一、環境搭建）

如圖所示 增刪改 type default sdn orm rain exp 名稱 原網址：https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以說是近些年來最火的前端框架之一，越來越多的

【從零開始搭建自己的.NET Core Api框架】（二）搭建項目的整體架構

config 七層 數據 TP 暫時 整體架構 比較 架構 其他 本來打算將搭建項目架構和集成SqlSugar放在一起講的，但是感覺東西有點多，還是分成兩章吧~ 這一章講搭建項目的整體架構，這裏先把搭建完成後的最終效果放出來，然後再逐個解釋每層的作用。 可以看到這裏一

【從零開始搭建自己的.NET Core Api框架】（三）集成輕量級ORM——SqlSugar：3.3 自動生成實體類

i++ 點運算 自己的 yui content project style ref 數據庫表 系列目錄 一. 創建項目並集成swagger 　　1.1 創建 　　1.2 完善 二. 搭建項目整體架構 三. 集成輕量級ORM框架——SqlSugar 　　3.1 搭建環境 　

【從零開始搭建自己的.NET Core Api框架】（六）泛型倉儲的作用

tar write ges 分享圖片 () dex 抽象 .sql cut 系列目錄 一. 創建項目並集成swagger 　　1.1 創建 　　1.2 完善 二. 搭建項目整體架構 三. 集成輕量級ORM框架——SqlSugar 　　3.1 搭建環境 　　3.2 實戰篇：

python自己動手從零開始搭建FTP伺服器2 FTP初步框架

5 開始新增FTP框架     通過學習FTP協議，我們知道FTP維護了兩個TCP連線。一個是控制連線，一個是資料連線。控制連線走的是控制資訊、命令等。資料連線是用來發送檔案和目錄的。  為什麼要這麼設計呢？剛好在學習TCP/IP協議棧，嘗試解釋下。FTP中的命令，都是簡單

從零開始搭建自己的網站二：Springboot專案框架搭建

上一篇文章中，講的第一、二步購買伺服器和繫結域名，我就不細細講了。本文中會講解如何構建一個基本的Springboot+freemarker+mybatis專案框架 1、先建立Gradle專案，用Gradle來管理我們的專案。 2、建立目錄結構 3、具體程式碼 1）bui

什麼是devops，基於Gitlab從零開始搭建自己的持續整合流水線(Pipeline)

一、gitlab 實現的 auto devops 1. DevOps中的一些概念與原則 (1) 什麼是持續整合 持續整合（Continuous integration，簡稱CI）指的是，頻繁地（一天多次）將程式碼整合到主幹。 它的好處主要有兩個。

Vue+ElementUI從零開始搭建自己的網站（三、元件間的通訊）

前面討論了環境的搭建和導航頁面以及路由的配置，今天我們討論下如何開發一個擁有表單和表格功能的頁面。先上開發完的效果圖：  可以看出頁面非常的簡單，其中上半部分是表單搜尋和查詢，下半部分是用於展示資料的表格。如果按照傳統的開發思路，其實非常簡單，只要用兩個div，第一個d

基於ionic+cordova+angularJs從零開始搭建自己的移動端H5 APP

     這裡詳細介紹下如何用ionic+cordova+angularjs搭建自己的移動端app，包括環境搭建，框架使用等，具體專案已放置在github上，可下載下來自行啟動。 下載地址：https://github.com/foreverjiangting/myApp/

從零開始搭建android框架系列（轉）

bsp andro hup 開始 blank class and lan com 網址：從零開始搭建android框架系列 githup：https://github.com/CameloeAnthony/Ant從零開始搭建android框架系列（轉）

從零開始搭建框架SSM+Redis+Mysql（二）之MAVEN項目搭建

blog 目的 定位 enc style log onf project 集成 從零開始搭建框架SSM+Redis+Mysql（二）之MAVEN項目搭建 廢話不說，直接擼步驟！！！ 1.創建主項目：ncc-parent 選擇maven創建項目，註意在創建項目中，packi