專屬博客，你值得擁有（Windows 版本）

時間  2019-11-07
標籤 專屬 博客 值得 擁有 windows 版本 欄目 Windows 简体版
原文   原文鏈接

轉載請標明出處，謝謝專屬博客，你值得擁有（Windows 版本）

1、前提：

一直想着寫一篇關於搭建我的博客的文章，可是最近老是被各類雜事纏身,抽不開身。
 PS:（其實還不是由於本身最近懶了，手動捂臉），今天終於有時間來寫一篇文章了。網上
 有不少關於搭建我的博客的文章，有的須要購買域名有的須要買服務器，而且須要收費，本着
 綠色無污染（免費）的原則，來開始咱們的旅程。
複製代碼

###2、準備條件html

hexo.png

  • NodeJsnode

    Nodejs框架是基於V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基於V8，同時打開20-30個網頁都很流暢。
 Nodejs標準的web開發框架Express，能夠幫助咱們迅速創建web站點，比起PHP的開發效率更高，並且學習曲線更低。很是適合小型網站，
 個性化網站，咱們本身的Geek網站！！

     JS是腳本語言，腳本語言須要一個解析器才能運行。對於寫在HTML頁面裏面的JS，
 瀏覽器充當瞭解析器的角色。而對於須要獨立運行的JS，NodeJS就是一個解析器。

     每種解析器就是一個運行環境，不但容許JS定義各類數據結構，進行各類計算，還容許JS使用運行環境提供的內置對象和方法作一些事情。
  例如運行在瀏覽器中的JS的用途是操做DOM，瀏覽器就提供了document之類的內置對象。而運行在NodeJS中的JS的用途是操做磁盤文件或者搭
  建HTTP服務器，NodeJS就相應提供了fs、http等內置對象。
複製代碼

  • Hexogit

    Hexo 是一款基於Node.js、快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。 官網及文檔程序員

  • githubgithub

    GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things. So while it’s not a direct part of the Git open source project, there’s a good chance that you’ll want or need to interact with GitHub at some point while using Git professionally.（摘自官方文檔）
    英文有限，我就直接翻譯一下，可能會有點辣眼睛web

    GitHub 是 Git 存儲庫的最大主機, 是數以百萬計的開發人員和項目協做的中心點。全部 git 存儲庫中有很大一部分駐留在 GitHub 上, 
許多開源項目都使用它來進行 git 託管、問題跟蹤、代碼審閱和其餘操做。所以, 雖然它不是 Git 開源項目的直接部分, 但在使用 Git 的
專業性時, 您可能但願或須要與 GitHub 進行交互。 
複製代碼

  • Markdownchrome

    Markdown 是一種輕量級標記語言，創始人爲約翰·格魯伯（John Gruber）。它容許人們「使用易讀易寫的純文本格式編寫文檔，
而後轉換成有效的XHTML(或者HTML)文檔」。[1]這種語言吸取了不少在電子郵件中已有的純文本標記的特性。

優勢：

一、簡單，容易上手
二、純文本實現，程序員最愛，容易擴展，方便和其餘工具聯動
三、平臺支持廣：以Github爲首的各類平臺、各類博客都支持，基本上如今面向程序員的輸入框均可以用Markdown來寫了
四、豐富的工具鏈
五、編輯器：各類支持所見即所得的編輯器
六、和各類其餘格式互相轉化的工具。PDF、Mobi、Epub、HTML等等，幾乎你能想到的全部格式它都能轉換。
複製代碼

###3、軟件安裝npm

  • NodeJS 下載地址 windows

    NodeJs.png
    PS：軟件安裝直接設置一個路徑就OK了，我是安裝在E盤下的E:\ProgramFiles\NodeJs中，固然默認也能夠，可是須要你記住路徑便可。

  • git 下載地址 瀏覽器

    git.png
    PS：和上面那個設置差很少軟件安裝直接設置一個路徑就OK了，我是安裝在E盤下的E:\ProgramFiles\git，固然默認也能夠，可是須要你記住路徑便可。

+Typora(MarkDown編輯器)下載地址

MarkDown.png

PS:和上面那個設置差很少軟件安裝直接設置一個路徑就OK了，我是安裝在E盤下的E:\ProgramFiles\MarkDown，固然默認也能夠，可是須要你記住路徑便可。

4、環境變量配置

一、右擊屬性電腦—>屬性打開—>高級系統設置——->環境變量—>path，點擊編輯在裏面，輸入你的NodeJS的安裝路徑便可，E:\ProgramFiles\NodeJs是個人NodeJs的安裝目錄，__注意:__你配環境變量的時候要配你本身安裝的目錄。配環境變量是爲了讓windows的命令行能調用到NodeJS裏面的命令。

環境變量.png
環境變量配置.png

二、安裝Hexo __第一步：__打開命令行

在鍵盤中直接按下win+R鍵打開運行窗口，輸入cmd打開命令行
複製代碼

__第二步：__進入安裝NodeJs路徑

nodejs路徑.png

__第三步：__開始安裝hexo，利用 npm 命令便可安裝。

npm install -g hexo
複製代碼

安裝hexo.png

開始搭建博客

稍做等待，便可安裝成功。接下來，執行

mkdir blog && cd blog
複製代碼

此處blog即是你的博客目錄，固然其餘什麼名字也是極好的，看心情了，此時最好將此目錄備份到雲盤或者其餘地方，以防文件夾丟失後博客就沒有了。

而後執行

hexo init
複製代碼

安裝依賴包

npm install
複製代碼

至此，博客搭建成功！固然，僅僅是本地的了。此時執行

hexo g
複製代碼

便可生成靜態頁面，而後執行

hexo s
複製代碼

訪問http://localhost:4000便可看到你的博客(運行了是這樣的以下圖所示)。

hexo頁面.png

若是想讓放到網上該怎麼辦呢？那就接着往下看咯。__注意：__暫時別關你的cmd窗口。

###5、部署博客到github

  • 一、註冊帳號

The first thing you need to do is set up a free user account. Simply visitgithub.com, choose a user name that isn’t already taken, provide an email address and a password, and click the big green 「Sign up for GitHub」 button.

你所要作的第一件事就是建立一個免費的用戶帳號。簡單地訪問https://github.com，選擇一個未被使用過的用戶名，提供一個郵箱地址以及密碼，並點擊寫着「sign up for GitHub」的綠色按鈕。

image

通過郵箱認證後，該帳號就會被激活的。

  • 二、建立一個倉庫

建立倉庫.png
建立倉庫1.png

注：Github Pages的Repository名字是特定的，好比我Github帳號是muyishuangfeng，那麼我Github Pages Repository名字就是muyishuangfeng.github.io(由於我以前建立過本身的我的博客了因此輸入muyishuangfeng.github.io時是已經存在的__以下圖所示__，爲了說明因此多加了一個s)。

建立倉庫2.png

  • 三、設置github pages

建立成功後，回到主頁面，點擊進入你剛剛建立好的倉庫

gitpages.png

接着點擊settings，進入倉庫管理

gitpages.png

選擇主題併發布

選擇主題.png

主題.png

更新你的站點（點擊連接便可進入，__注意:__這裏爲了讓你們看清楚效果，申請了另一個帳號進行演示的，其實都是同樣的。）

更新站點.png

至此，你的github pages就發佈成功了。試試在瀏覽器的地址欄輸入」你github的用戶名.github.io」吧！ 個人效果以下圖所示：（比較醜，固然這尚未結束）

站點效果.png

如今回到你的 github倉庫,而且複製地址

複製倉庫地址.png

打開你安裝好的NodeJS的根目錄，而後點擊進入剛剛新建的blog文件夾：（右擊_config.yml打開配置文件）

打開配置文件.png

配置.png
__注意：__地址是你本身的地址。

  • 四、 更新 接下來，回到你的cmd窗口，只需執行兩個命令：

    npm install hexo-deployer-git --save （這命令是爲了解決hexo新版本的部署問題）

 hexo g 回車 （這是從新生成blog）

 hexo d 回車 （這是將本地blog部署到github的倉庫）

 如今，試試在瀏覽器的地址欄輸入：「你的用戶名.github.io」，此時，你應該會看到這樣的界面（我這個 經配置過樣式的博客）：
複製代碼

我的博客.png

6、主題配置

接下來，開始對博客進行一番改造。畢竟博客是本身精神上的一個家園，固然要裝飾打造一番了。

首先嘛，天然是進行主題的選擇了，主題在這裏。選擇好一個主題以後，就是進行主題的安裝了。在剛剛那個網站上，點擊右邊的連接能夠看到主題的Demo，選則一個喜歡的主題而後點擊左邊的連接進入github上：（我這裏的是NexT）

樣式.png
clone 主題樣式

主題設置.png

第一步：克隆主題到本地 themes目錄下

而後命令行進入到你的博客目錄的themes目錄下：

image

點擊鼠標右鍵，打開github bash執行下面語句：

git clone主題 或者 git clone github.com/iissnan/hex…

（這個是剛剛那個頁面的Install下的命令 ）

clone樣式.png

next.png

QQ圖片20180520215416.png

其中git clone後面的連接爲你進入的主題的連接地址，themes/NexT爲你的保存目錄，此處以NexT主題爲栗子，具體的以你選擇的主題爲準。

第二步：配置你將要生成的博客主題爲剛剛克隆的主題

而後進入到/blog/_config.yml裏面，將theme改成你剛剛下載保存的主題的名字，我這裏是NexT。

主題.png

而後回到命令行，執行:

hexo g 回車 （這是從新生成blog）

 hexo d 回車 （這是將本地blog部署到github的倉庫）
複製代碼

好了，試試在瀏覽器的地址欄輸入：「你的github用戶名.github.io」，你將會看到以下主題的blog頁面/：

我的博客.png

編寫與發佈博客

編寫博客.png

博客文章.png

markdown.png

怎麼發佈到github的博客呢？仍是老樣子啊：

同步.png

保存.png

接着：

總結：

終於奮戰了好幾個小時一份熱乎的搭建博客的文章出來了，這裏須要感謝開源網站和各類好用軟件的支持了。 感謝馮皓林的 《Hexo+github搭建我的博客》 感謝 GitHub、Git、NodeJs 若是有寫的不對的地方還請各位不吝賜教。 個人簡書 個人掘金 個人github 個人我的博客

小弟就厚着臉皮說歡迎關注哈

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程