整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
互聯網時代的今天，各種各樣的網頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP，其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。
作為蕓蕓眾生中的一員，學習網頁制作對我們的事業、生活有怎樣的幫助呢？
第一，學習網頁制作有助于理解網絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。
第二，學好網頁制作是制作網站的基礎，如果您因為事業需要或者個人愛好打算制作自己的網站或博客，無論是打算使用php還是Java還是Python去構建您的網站，精通網頁制作技術是您的第一塊技術基石。
第三，如果您打算學習網絡爬蟲來分析一些網絡數據，了解網頁頁面構成也是必要基礎，至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。
第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。
除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現實（VR）還是增強現實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現。
所以，新的一年里，我打算做網頁制作的學習教程，讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。
簡單來說學習網頁制作需要掌握三門技術。
第一，也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網頁里都有哪些內容呢？
一般網頁中都會有文字、圖片、聲音、視頻、表格等內容，這些內容就是靠HTML中的標簽添加進頁面的。
所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網頁添加所有需要的信息內容。
第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些，我們為其添加css樣式表。添加后如圖所示：
我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。
第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢？
首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。
其次，JavaScript可以為傳統頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現一些3d游戲或其他三維動態演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！
再次，JavaScript可以以網頁為基礎，實現各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網：http://phaser.io/
JavaScript為網頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！
網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面，顧名思義動態頁面指的是可以與服務器進行數據交互的頁面，這一點大家不必糾結。
簡單來說，靜態頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內容，而動態頁面寫好后會隨著不同的訪問變換不同數據，動態頁面更像是一個頁面模板，隨時套用不同信息。
大部分網站中的頁面都是動態頁面。
如果使用靜態頁面做網站會出現什么問題呢？如果您有300篇博客文章，那您就要做300個靜態頁面來顯示，大型資訊網站信息量更加龐大，如果都用靜態頁面來做，占用的服務器空間也是龐大到不可想象。
網站中的動態頁面就解決了這個問題，例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內容，我們稱之為模板。當您打開后，顯示的內容都是在數據庫中調出的。這樣，一個數據庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。
例如在靜態頁面中顯示文字字數的代碼是這樣
<p>300字</p>如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣
<p><?php echo zm_count_words($text); ?></p><?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。
無論是靜態頁面還是動態頁面，他們的核心內容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態頁面在HTML中插入信息，而動態頁面插入的是調取數據庫信息的語句。
因此，我們這個教程看起來是在做靜態頁面，但是我們學習的也是制作網站的基礎知識。
第一，可以寫出靜態頁面。
第二，有能力讀懂他人寫好的頁面代碼。
第三，為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。
第四，掌握編程基礎，至少是基于JavaScript的。
我是大魚，致力于數字藝術技術分享！歡迎大家關注！祝愿大家2020年學有所成！
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
lt;h2 id="title1">列表標簽</h2>
<h3 id="title2">無序列表(unordered list)</h3>
作用: 給一堆內容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后
格式:
li 英文是 list item, 翻譯為列表項
<h4>選擇居住城市(CN)</h4> <ul> <li>北京</li> <li>上海</li> <li>廣州</li> <li>鐵嶺</li> </ul>
ul應用場景:
導航條
商品列表等
新聞列表
注意事項:
其實ul還有一個type屬性, 可以修改先導符號的樣式, 取值有disc、square、circle幾種
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
這里指的無序是指對于主體來說內容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標題改為"中國霧霾排行", 那么就必須有嚴格的排名,北京必須寫在前面
瀏覽器會給無需列表自動添加先導符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義
ul是一個組標簽, 一定是一坨一坨的出現, 也就是說li標簽不能單獨存在, 必須包裹在ul里面
由于ul和li是一個整體, 所以ul里面不推薦包裹其它標簽, 永遠記住ul里面最好只寫li標簽
雖然ul中推薦只能寫li標簽, 但是li標簽是一個容器標簽, li標簽中可以添加任意標簽, 甚至可以添加ul標簽
關注微信訂閱號：網頁設計輕松學
<ul> <li> 好吃的 <ul> <li>牛奶</li> <li>面包</li> </ul> </li> <li> 日用的 <ul> <li>毛巾</li> <li>牙膏</li> </ul> </li> </ul>
<h3 id="title3">有序列表(ordered list)</h3>
作用: 給一堆內容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分
格式:
<h4>中國房價排行</h4> <ol> <li>北京</li> <li>上海</li> <li>廣州</li> <li>鐵嶺</li> </ol>
ol應用場景:
xxx排行榜
其實ol應用場景并不多, 因為能用ol做的用ul都能做
注意事項:
ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點都一樣
其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
<h3 id="title4">定義列表(definition list)</h3>
作用: 給一堆內容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進行相應的描述
格式:
dt英文definition title, 翻譯為定義標題
dd英文definition description, 翻譯為定義描述信息
<dl> <dt>北京</dt> <dd>國家的首都, 看升國旗的地方</dd> <dt>上海</dt> <dd>魔都, 遍地是黃金的地方</dd> </dl>
關注微信訂閱號：網頁設計輕松學
dl應用場景:
網站底部相關信息
但凡看到一堆內容都是用于描述某一個內容的時候就要想到dl
注意事項:
- dl是一個組標簽, 一定是一坨一坨的出現, 也就是說dt和dd標簽不能單獨存在, 必須包裹在dl里面
由于dl和dt、dd是一個整體, 所以dl里面不推薦包裹其它標簽
dd和dt和li標簽一樣是容器標簽, 里面可以添加任意標簽
定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現多個dt對應一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述
定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl
注意，這篇文章篇幅較長，主要針對新手，每一步很詳細，所以可能會顯得比較啰嗦，建議基礎比較好小伙伴根據右側目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ o ⊙ )。
教程內容隨意復制使用，引用的話請加一個參考鏈接，謝謝！
倒騰了一兩周總算把個人博客網站完善了，目前這個版本使用應該是夠了，當然還有一些優化項和功能增加后續在慢慢更新，為了回饋開源，今天準備把我自己修改完善的blog網站源代碼開源。這不是生成后的網頁文件，是您可以直接使用的源碼，您只需要把博客相關信息換成您自己的就可以部署了，對于新手或者不懂編程的小伙伴來說，簡直是福音，極大簡化了您構建博客的工作量和復雜度，每個人都可以下載并修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最后，我們還是給這個開源小項目取個名字吧，就叫hexo-blog-fly吧，怎么樣？<<<<<源代碼下載>>>>>
本博客基于Hexo框架搭建，用到hexo-theme-matery主題,并在此基礎之上做了很多修改，修復了一些bug，增加了一些新的特性和功能，博客地址：https://shw2018.github.io，博客演示：sunhwee.com。
簡單使用方法：
更多詳情教程，強烈推薦看我寫的：Hexo+Github博客搭建完全教程
有什么問題可以在文章最后評論區留言和討論，當然，歡迎文章最后打賞投幣，請博主一杯冰闊樂，笑～
最后，如果項目和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我github項目倉庫點個star，謝謝您！
去年在博客園注冊了自己的第一個博客，當時初衷就是想拿來作為自己的在線筆記本，做做學習記錄，分享一些學到的東西，使用第三方提供的博客服務其實也挺方便，現在市面上提供類似服務的博客網站也很多，如CSDN，博客園，簡書等平臺，可以直接在上面發表，用戶交互做的好，寫的文章百度也能搜索的到。但是缺點是比較不自由，會受到平臺的各種限制和惡心的廣告，個性化不足。而自己購買域名和服務器，搭建博客的成本實在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這么一個網站，還要定期的維護它，對于我們大多數人來說，也是沒有這樣的精力和時間。那么，我們能不能自己定制一個自己喜歡的個性化博客，同時也不用付出太高的成本啦？
這就引出了第三種選擇，基于開源框架搭建博客，然后直接在github page平臺上托管我們的博客。這樣就可以安心的來寫作，又不需要定期維護，基于這個想法，今年8月初的時候開始搭建第一個屬于自己的獨立博客，前后斷續弄了近一周，到現在稍微有點模樣了。我想可能有很多小伙伴應該也想過搭建一個自己的博客，當然，網上也有一堆詳細教程。寫這篇博客的目的大概有兩個，第一個是當做自己的搭建記錄，方便以后自己隨時查看提示修改，第二個是稍稍總結一下具體的搭建步驟以及一些支持個性化定制的博客源碼修改的教程，稍稍分享一下這些修改經驗，當然，更多的一些個性化操作需要你自己以后在這個基礎上慢慢去摸索，有些寫的不太好的地方還希望看到的小伙伴多多包涵。
博客初步的頁面效果可以看一下我的博客：sunhwee.com，歡迎大家支持。
本博客基于Hexo，所以首先要了解一下我們搭建博客所要用到的框架。Hexo是高效的靜態網站生成框架，它基于Node.js，快速，簡單且功能強大，是搭建博客的首選框架。大家可以進入hexo官網進行詳細查看，因為Hexo的創建者是臺灣人，對中文的支持很友好，可以選擇中文進行查看。通過Hexo，你可以直接使用Markdown語法來撰寫博客。相信很多小伙伴寫工程都寫過README.md文件吧，對，就是這個格式的！寫完后只需兩三條命令即可將生成的網頁上傳到github或者coding等代碼管理托管平臺，然后別人就可以瀏覽你的博客網頁啦。是不是很簡單？你無需關心網頁源代碼的具體生成細節，只需要用心寫好你的博客文章內容就行了。
簡單總結：Hexo, 產品成熟，使用簡單，功能強大，有豐富的各種插件資源；但，像發布后臺、站內搜索，評論系統類似訴求，雖然有對應的工具，但也需要自己折騰下，后續我們一步一步介紹。
教程大致分三個部分，
hexo的初級搭建還有部署到github page上，以及個人域名的綁定。
為了把本地的網頁文件上傳到github上面去，需要用到工具———Git[下載地址]。Git是目前世界上最先進的分布式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管理。Git非常強大，建議每個人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以看一下。Git教程
windows：到git官網上下載.exe文件,Download git,安裝選項還是全部默認，只不過最后一步添加路徑時選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符里打開git了。
順便說一下，windows在git安裝完后，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點難用。
linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行代碼
sudo apt-get install git
安裝完成后在命令提示符中輸入git --version來查看一下版本驗證是否安裝成功。
Hexo是基于node.js編寫的，所以需要安裝一下node.js和里面的npm工具。
windows：下載穩定版或者最新版都可以Node.js，安裝選項全部默認，一路點擊Next。
最后安裝好之后，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現版本號，那么就安裝成功了。
linux：命令行安裝：
sudo apt-get install nodejs
sudo apt-get install npm
不過不推薦命令行安裝，有時候有問題，建議直接到官網去下載編譯好的壓縮文件，如下所示:
然后解壓到你指定的文件夾即可，比如我解壓到我系統的/home/shw/MySoftwares目錄下了，如圖:
注意本壓縮包是.tar.xz格式的，需要兩次解壓
配置一下環境變量
sudo vim /etc/profile
復制下面兩行到剛打開的profile文件最底部(注意node的安裝地址
/home/shw/MySoftwares/node-v12.8.0-linux-x64換成自己的)：
export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin
保存后退出，再執行下面命令將環境變量生效：
source /etc/profile
將目錄軟鏈接到全局環境下（命令后面的/usr/local/bin/node是固定的）
sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node
sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm
這樣安裝好了以后使用npm安裝的包(比如：ionic serve)，使用包的命令時可能會提示找不到命令，沒關系，在用戶目錄下終端執行下面命令(固定寫法)：
echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc
這樣我們在所有用戶下，都可以使用npm，也可以使用npm安裝的包的命令。成功地將nodejs安裝并配置到全局環境下。
安裝完后，打開命令行終端，輸入:
node -v
npm -v
檢查一下有沒有安裝成功
如果沒有梯子的話，可以使用阿里的國內鏡像進行加速。
npm config set registry https://registry.npm.taobao.org
前面git和nodejs安裝好后，就可以安裝hexo了，你可以先創建一個文件夾MyBlog，用來存放自己的博客文件，然后cd到這個文件夾下（或者在這個文件夾下直接右鍵git bash打開）。
比如我的博客文件都存放在D:\Study\MyBlog目錄下。
在該目錄下右鍵點擊Git Bash Here，打開git的控制臺窗口，以后我們所有的操作都在git控制臺進行，就不用Windows自帶的cmd了。
定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo。可能會有幾個報錯，無視它就行。
npm install -g hexo-cli
安裝完后輸入hexo -v驗證是否安裝成功。
至此hexo就安裝完了。
接下來初始化一下hexo,即初始化我們的網站，輸入hexo init初始化文件夾
hexo init MyBlog
這個MyBlog可以自己取什么名字都行，然后，接著輸入npm install安裝必備的組件。
cd MyBlog //進入這個MyBlog文件夾
npm install
新建完成后，指定文件夾MyBlog目錄下載：
這樣本地的網站配置也弄好了，輸入hexo g生成靜態網頁，然后輸入hexo s打開本地服務器，
hexo g
hexo server(或者簡寫:hexo s）)
然后瀏覽器打開http://localhost:4000/，就可以看到我們的博客啦，效果如下：
按ctrl+c關閉本地服務器。
接下來就去注冊一個github賬號，用來存放我們的網站。大多數小伙伴應該都有了吧，作為一個合格的程序猿（媛）還是要有一個的。
打開https://github.com/，新建一個項目倉庫New repository，如下所示：
然后如下圖所示，輸入自己的項目名字，后面一定要加.github.io后綴，README初始化也要勾上。
要創建一個和你用戶名相同的倉庫，后面加.http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是http://xxxx.github.io，其中xxx就是你注冊GitHub的用戶名。例如我的：http://shw2018.github.io
生成SSH添加到GitHub，連接Github與本地。
右鍵打開git bash，然后輸入下面命令：
git config --global user.name "yourname"
git config --global user.email "youremail"
這里的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的賬戶。例如我的：
git config --global user.name "shw2018"
git config --global user.email "hwsun@std.uestc.edu.cn"
可以用以下兩條，檢查一下你有沒有輸對
git config user.name
git config user.email
然后創建SSH,一路回車
ssh，簡單來講，就是一個秘鑰，其中，id_rsa是你這臺電腦的私人秘鑰，不能給別人看的，id_rsa.pub是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你鏈接GitHub自己的賬戶時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上。
ssh-keygen -t rsa -C "youremail"
這個時候它會告訴你已經生成了.ssh的文件夾。在你的電腦中找到這個文件夾。或者git bash中輸入
cat ~/.ssh/id_rsa.pub
將輸出的內容復制到框中，點擊確定保存。
打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的id_rsa.pub里面的信息復制進去。如圖：
在git bash輸入ssh -T git@github.com，如果如下圖所示，出現你的用戶名，那就成功了。
這一步，我們就可以將hexo和GitHub關聯起來，也就是將hexo生成的文章部署到GitHub上，打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這里你可以修改與博客配置相關的各種信息。
修改最后一行的配置：
deploy:
type: git
repository: https://github.com/shw2018/shw2018.github.io
branch: master
repository修改為你自己的github項目地址即可，就是部署時，告訴工具，將生成網頁通過git方式上傳到你對應的鏈接倉庫中。
這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
然后
hexo clean
hexo generate
hexo deploy
其中 hexo clean清除了你之前生成的東西，也可以不加。 hexo generate顧名思義，生成靜態文章，可以用 hexo g縮寫 ，hexo deploy部署文章，可以用hexo d縮寫
注意deploy時可能要你輸入username和password。
得到下圖就說明部署成功了，過一會兒就可以在http://yourname.github.io 這個網站看到你的博客了！！
現在你的個人網站的地址是yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設置個人域名了。但是需要花錢。
不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續看后面的，以后想買域名了在還看這塊
首先你得購買一個專屬域名，xx云都能買，看你個人喜好了。
這篇以騰訊云為例，騰訊云官網購買：
然后實名認證后進入騰訊云控制臺，點云解析進去，找到你剛買的域名，點進去添加兩條解析記錄，如下圖所示：
然后打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你自己的域名，保存：
這時候你的項目根目錄應該會出現一個名為CNAME的文件了。如果沒有的話，打開你本地博客/source目錄，我的是D:\Study\MyBlog\source，新建CNAME文件，注意沒有后綴。然后在里面寫上你的域名，保存。最后運行hexo g、hexo d上傳到github。
過不了多久，再打開你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網站啦！
首先在博客根目錄下右鍵打開git bash，安裝一個擴展npm i hexo-deployer-git。
然后輸入hexo new post "article title"，新建一篇文章。
然后打開D:\Study\MyBlog\source\_posts的目錄，可以發現下面多了一個文件夾和一個.md文件，一個用來存放你的圖片等數據，另一個就是你的文章文件啦。
你可以會直接在vscode里面編寫markdown文件，可以實時預覽，也可以用用其他編輯md文件的軟件的工具編寫。
編寫完markdown文件后，根目錄下輸入hexo g生成靜態網頁，然后輸入hexo s可以本地預覽效果，最后輸入hexo d上傳到github上。這時打開你的github.io主頁就能看到發布的文章啦。
到這兒基本第一部分就完成了，已經完整搭建起一個比較簡陋的個人博客了，接下來我們就可以對我們的博客進行個性化定制了。
我們要定制自己的博客的話，首先就要來了解一下Hexo博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板并加入自己的定制源代碼實現個性化定制
從上圖可以看出，博客的目錄結構如下：
- node_modules
- public
- scaffolds
- source
- _data
- _posts
- about
- archives
- categories
- friends
- tags
- themes
node_modules是node.js各種庫的目錄，public是生成的網頁文件目錄，scaffolds里面就三個文件，存儲著新文章和新頁面的初始設置，source是我們最常用到的一個目錄，里面存放著文章、各類頁面、圖像等文件，themes存放著主題文件，一般也用不到。
我們平時寫文章只需要關注source/_posts這個文件夾就行了。
在文件根目錄下的_config.yml，就是整個hexo框架的配置文件了。可以在里面修改大部分的配置。詳細可參考官方的配置描述。
參數描述title網站標題subtitle網站副標題description網站描述author您的名字language網站使用的語言timezone網站時區。Hexo 默認使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。
其中，description主要用于SEO，告訴搜索引擎一個關于您站點的簡單描述，通常建議在其中包含您網站的關鍵詞。author參數用于主題顯示文章的作者。
參數描述url網址root網站根目錄 permalink文章的永久鏈接格式permalink_defaults永久鏈接中各部分的默認值
在這里，你需要把url改成你的網站域名。
permalink，也就是你生成某個文章時的那個鏈接格式。
比如我新建一個文章叫temp.md，那么這個時候他自動生成的地址就是
http://yoursite.com/2018/09/05/temp。
以下是官方給出的示例，關于鏈接的變量還有很多，需要的可以去官網上查找 永久鏈接 。
參數結果
:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world
再往下翻，中間這些都默認就好了。
theme: landscap
theme就是選擇什么主題，也就是在themes這個文件夾下，在官網上有很多個主題，默認給你安裝的是lanscape這個主題。當你需要更換主題時，在官網上下載，把主題的文件放在themes文件夾下，再修改這個主題參數就可以了。
Front-matter 是md文件最上方以 ---分隔的區域，用于指定個別文件的變量，舉例來說：
title: Hexo+Github博客搭建記錄
date: 2019-08-10 21:44:44
下是預先定義的參數，您可在模板中使用這些參數值并加以利用。
參數描述layout布局title標題date建立日期updated更新日期comments開啟文章的評論功能tags標簽（不適用于分頁）categories分類（不適用于分頁）permalink覆蓋文章網址
其中，分類和標簽需要區別一下，分類具有順序性和層次性，也就是說Foo，Bar不等于Bar，Foo；而標簽沒有順序和層次。
---
title: Hexo+Github博客搭建記錄
date: 2019-08-10 21:44:44
author: 洪衛
img: /medias/banner/7.jpg
coverImg: /medias/banner/7.jpg
top: true
cover: true
toc: true
password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110
mathjax: true
summary: 這是你自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作為摘要
tags:
- Hexo
- Github
- 博客
categories:
- 軟件安裝與配置
---
1.2.4.1 post
當你每一次使用代碼
hexo new XXX
它其實默認使用的是post這個布局，也就是在source文件夾下的_post里面。
Hexo有三種默認布局：post、page和draft，它們分別對應不同的路徑，而您自定義的其他布局和post相同，都將儲存到source/_posts文件夾。
而new這個命令其實是：
hexo new [layout] <title>
只不過這個layout默認是post罷了。
1.2.4.2 page
如果你想另起一頁，那么可以使用
hexo new page newpage
系統會自動給你在source文件夾下創建一個newpage文件夾，以及newpage文件夾中的index.md，這樣你訪問的newpage對應的鏈接就是http://xxx.xxx/newpage
1.2.4.3 draft
draft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那么可以
hexo new draft newdraft
這樣會在source/_draft中新建一個newdraft.md文件，如果你的草稿文件寫的過程中，想要預覽一下，那么可以使用
hexo server --draft
在本地端口中開啟服務預覽。
如果你的草稿文件寫完了，想要發表到post中，
hexo publish draft newdraft
就會自動把newdraft.md發送到post中。
我們在了解Hexo博客文件基礎之后，知道主題文件就放在themes文件下，那么我們就可以去Hexo官網下載喜歡的主題，復制進去然后修改參數即可。
網上大多數主題都是github排名第一的Next主題，但是我個人不是很喜歡，我在網上看到一個主題感覺還不錯：hexo-theme-matery，地址在傳送門。這個主題看著比較漂亮，并且響應式比較友好，點起來很舒服，功能也比較很多。
當然，人各有異，這個主題風格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。
特性：
他的介紹文檔寫得非常的詳細，還有中英文兩個版本。效果圖如下：
首先先按照文檔教程安裝一遍主題，然后是可以正常打開的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據你自己的習慣和喜好修改一下， 下面記錄一下我這個博客修改了的一些地方。
首先為了新建文章方便，我們可以修改一下文章模板，建議將/scaffolds/post.md修改為如下代碼：
---
title: {{ title }}
date: {{ date }}
author:
img:
coverImg:
top: false
cover: false
toc: true
mathjax: false
password:
summary:
tags:
categories:
---
這樣新建文章后 一些Front-matter參數不用你自己補充了，修改對應信息就可以了。
原來的主題沒有404頁面，我們加一個。首先在/source/目錄下新建一個404.md，內容如下：
title: 404
date: 2019-08-5 16:41:10
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面 :("
然后在/themes/matery/layout/目錄下新建一個404.ejs文件，內容如下：
<style type="text/css">
/* don't remove. */
.about-cover {
height: 75vh;
}
</style>
<div class="bg-cover pd-header about-cover">
<div class="container">
<div class="row">
<div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
<div class="brand">
<div class="title center-align">
404
</div>
<div class="description center-align">
<%= page.description %>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 每天切換 banner 圖. Switch banner image every day.
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
修改
/themes/matery/layout/about.ejs，找到<div class="card">標簽，然后找到它對應的</div>標簽，接在后面新增一個card，語句如下：
<div class="card">
<div class="card-content">
<div class="card-content article-card-content">
<div class="title center-align" data-aos="zoom-in-up">
<i class="fa fa-address-book"></i> <%- __('myCV') %>
</div>
<div id="articleContent" data-aos="fade-up">
<%- page.content %>
</div>
</div>
</div>
</div>
這樣就會多出一張card，然后可以在/source/about/index.md下面寫上你的簡歷了，當然這里的位置隨你自己設置，你也可以把簡歷作為第一個card。
2.4.1 解決mathjax與代碼高亮的沖突
如果你按照教程安裝了代碼高亮插件hexo-prism-plugin，單獨使用是沒有問題的，但如果你又使用了mathjax，并且按照網上教程，安裝kramed插件并修改了js文件里的正則表達式（為了解決markdown和mathjax的語法沖突），那你的代碼就無法高亮了。解決方法很簡單，別用kramed插件了，還用原來自帶的marked插件，直接改它的正則表達式就行了。
2.4.2 加數學公式顯示
打開/themes/matery/layout中的post.ejs文件，在最下方粘貼如下代碼：
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
由于markdown語法與mathjax語法存在沖突，所以還需要修改源文件。
打開/node_modules/marked/lib中的marked.js文件，第539行的escape:處替換成：
escape: /^$[`*\[\]()#$+\-.!_>])/
第553行的em:處替換成：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
這時在文章里寫數學公式基本沒有問題了，但是要注意：
數學公式中如果出現了連續兩個{，中間一定要加空格！
舉個例子:
行內公式：y=f(x)y=f(x)
代碼：
$y = f(x)$
行間公式：
y=fg1(x)y=fg1(x)
代碼：
\\[y = {f_{ {g_1}}}(x)\\]
注意上面花括號之間有空格！
修改
/themes/matery/layout/_partial中的footer.ejs，在最后加上：
<script language=javascript>
function siteTime() {
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date對象距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(時間戳)
year - 作為date對象的年份，為4位年份值
month - 0-11之間的整數，做為date對象的月份
day - 1-31之間的整數，做為date對象的天數
hours - 0(午夜24點)-23之間的整數，做為date對象的小時數
minutes - 0-59之間的整數，做為date對象的分鐘數
seconds - 0-59之間的整數，做為date對象的秒數
microseconds - 0-999之間的整數，做為date對象的毫秒數 */
var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //北京時間2018-2-13 00:00:00
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
document.getElementById("sitetime").innerHTML = "本站已運行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時 " + diffMinutes + " 分鐘 " + diffSeconds + " 秒";
}/*因為建站時間還沒有一年，就將之注釋掉了。需要的可以取消*/
siteTime();
</script>
然后在合適的地方（比如copyright聲明后面）加上下面的代碼就行了：
<span id="sitetime"></span>
因為不蒜子至今未開放注冊，所以沒辦法在官網修改初始化，只能自己動手了。和上一條一樣，我們在
/themes/matery/layout/_partial里的footer.ejs文件最后加上：
<script>
$(document).ready(function () {
var int = setInterval(fixCount, 50); // 50ms周期檢測函數
var pvcountOffset = 80000; // 初始化首次數據
var uvcountOffset = 20000;
function fixCount() {
if (document.getElementById("busuanzi_container_site_pv").style.display != "none") {
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
clearInterval(int);
}
if ($("#busuanzi_container_site_pv").css("display") != "none") {
$("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始數據
clearInterval(int); // 停止檢測
}
}
});
</script>
然后把上面幾行有段代碼：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv">
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
</span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv">
人次, 訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
</span>
<% } %>
修改為：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv" style='display:none'>
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
</span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv" style='display:none'>
人次, 訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
</span>
<% } %>
其實就是增加了兩個style='display:none'而已。
其實三步就行了，不用像網上有些教程那么復雜。
第一步：
npm install --save hexo-helper-live2d
第二步：
npm install live2d-widget-model-shizuku
這里的動漫模型可以改，只需要下載對應模型就行了，你可以官方倉庫去看有哪些模型，下載你喜歡的就行。
第三步：
在根目錄配置文件中添加如下代碼：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: false
react:
opacity: 0.7
然后hexo g在hexo s就能預覽出效果了，但是有個注意的地方，這個動漫人物最好不要和不蒜子同時使用，不然不蒜子會顯示不出來。至于解決辦法后續更新。
解決動漫人物和不蒜子不能同時使用的bug（2019.08.11）：
打開themes\matery\layout\_partial中的footer.ejs，將本站總訪問量和訪客數的代碼改為如下：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv" style='display:none'></span>
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv" style='display:none'></span>
人次, 訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
<% } %>
變化就在下面兩句，將源代碼對應字段后面的＜/span＞寫在前面了。
<span id="busuanzi_container_site_pv" style='display:none'></span>
<span id="busuanzi_container_site_uv" style='display:none'></span>
發現按照上面改了過后，又出現一個新bug：文章頭部的閱讀次數不顯示了，解決辦法：（2019.08.11）：
打開themes\matery\layout\_partial中的post-detail.ejs，找到對應代碼字段：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
<div id="busuanzi_container_page_pv" class="info-break-policy">
<i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:
<span id="busuanzi_value_page_pv" ></span>
</div>
<% } %>
修改為下面的就可以了：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
<span id="busuanzi_container_site_pv" style='display:none'></span>
<i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:
<span id="busuanzi_value_page_pv" ></span>
<% } %>
由于這個主題自帶了gittalk、gitment、valine等評論插件，所以我們只需要對應插件參數就行了，這個博客用的是gittalk，如下：
當然也可以用其他評論插件，只需要配置對應項就是了，不是自帶的可以照著網上的教程自己弄一個，類似的文章有很多，可以搜索關鍵字就行了。
寫文章的時候，想插入一段BGM怎么辦？
其實我們可以借助一些在線音樂的外鏈播放方式，首先打開網易云網頁版，找到想聽的歌曲，然后點擊生成外鏈：
可能你會遇到問題，比如點擊生成外鏈會提示你由于版權原因，不能生成，那么可以用下面辦法(目前還有效，不知道后面會不會失效)
復制如下代碼：
粘貼到文章對應位置就行了，為了美觀，設置一下居中，具體代碼如下：
<div align="middle">這里粘貼剛剛復制的代碼</div>
如果我們自己寫博客寫疲勞了，想放松一下聽聽歌又不想切出博客主頁，那么我們可以自己定制一個博客音樂播放界面，把自己喜歡的歌曲都放進來，這里用到是Aplayer插件，但是歌曲來源需要我們自己定義，但是，因為各大音樂平臺，由于版權原因，很多歌曲是不支持外鏈播放的，難道我們就必須每首歌下載然后上傳云空間，再獲取詞曲封面么？這就比較麻煩了。其實不然，研究了半個小時，我發現可以采取下面的辦法，很方便：
操作如下圖：
為博客新增對emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件來支持 emoji表情的生成，把對應的markdown emoji語法（::,例如： :smile:）轉變成會跳躍的emoji表情，安裝命令如下：
npm install hexo-filter-github-emojis --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
執行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對應位置看到你用emoji語法寫的表情了。
如下圖：
matery主題已經集成Valine評論模塊，在主題配置文件.yml中配置相應的字段就行了。enable: true，XXX字段是需要自己注冊登錄leancloud官網，創建應用然后獲取appId和appKey，其他參數根據自己的需求修改就是，如下：
valine:
enable: true
appId: XXXXXXXXXXXXXXXXXXXXX
appKey: XXXXXXXXXXXXXXXXXXXX
notify: true
verify: true
visitor: true
avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: 'just go go' # Comment Box placeholder
注意：Valine用在matery主題上有個bug就是第一條評論位置會錯位
如下圖：
解決辦法：
F12開發者模式，控制臺定位bug位置，修改參數，調整對應主題源文件參數，得以解決，如下圖示：
原理就是給博客增加一個事件判斷，如下圖所示：
打開博客主題文件夾，路徑：
themes/matery/layout/layout.ejs，在對應位置添加如下代碼：
<script type="text/javascript">
var OriginTitile = document.title,
st;
document.addEventListener("visibilitychange", function () {
document.hidden ? (document.title = "看不見我~看不見我~", clearTimeout(st)) : (document.title =
"(??????) ?被發現了～", st = setTimeout(function () {
document.title = OriginTitile
}, 3e3))
})
</script>
然后 hexo clean && hexo g 即可。
hexo添加各種優化功能，比如SEO優化等。
待續......
網站推廣是一個比較煩人的事情，特別是對于專心搞技術的來說，可能就不是很擅長，那么怎么才能讓別人知道我們網站呢？也就是說我們需要想辦法讓別人通過搜索就可以搜索到博客的內容，給我們帶來自然流量，這就需要seo優化,讓我們的站點變得對搜索引擎友好
SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優化”。SEO是指通過站內優化比如網站結構調整、網站內容建設、網站代碼優化等以及站外優化。
首先要做的就是讓各大搜索引擎收錄你的站點，我們在剛建站的時候各個搜索引擎是沒有收錄我們網站的，在搜索引擎中輸入site:<域名>,如果如下圖所示就是說明我們的網站并沒有被百度收錄。我們可以直接點擊下面的“網址提交”來提交我們的網站
登錄百度站長搜索資源平臺：
http://zhanzhang.baidu.com， 只要有百度旗下的賬號就可以登錄，登錄成功之后在站點管理中點擊添加網站然后輸入你的站點地址。
注意，這里需要輸入我們自己購買的域名,不能使用xxx.github.io之類域名.因為github是不允許百度的spider（蜘蛛）爬取github上的內容的，所以如果想讓你的站點被百度收錄，只能使用自己購買的域名
在填完網址選擇完網站的類型之后需要驗證網站的所有權，驗證網站所有權的方式有三種：
其實使用哪一種方式都可以，都是比較簡單的。
但是一定要注意，使用文件驗證文件存放的位置需要放在sourc文件夾下，如果是html文件那么hexo就會將其編譯，所以必須要在html頭部加上的layout:false，這樣就不會被hexo編譯。（如果驗證文件是txt格式的就不需要）
其他兩種方式也是很簡單的，個人推薦文件驗證和CNAME驗證，CNAME驗證最為簡單，只需加一條解析就好~
我們需要使用npm自動生成網站的sitemap，然后將生成的sitemap提交到百度和其他搜索引擎
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
在根目錄配置文件.yml中修改url為你的站點地址
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shw2018.github.io/
url: https://sunhwee.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
執行完hexo g命令之后就會在網站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過：
https://sunhwee.com/baidusitemap.xml, 查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。
然后我們就可以將我們生成的sitemap文件提交給百度，還是在百度站長平臺，找到鏈接提交，這里我們可以看到有兩種提交方式，自動提交和手動提交，自動提交又分為主動推送、自動推送和sitemap
如何選擇鏈接提交方式
主動推送：最為快速的提交方式，推薦您將站點當天新產出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。sitemap：您可以定期將網站鏈接放到sitemap中，然后將sitemap提交給百度。百度會周期性的抓取檢查您提交的sitemap，對其中的鏈接進行處理，但收錄速度慢于主動推送。手動提交：一次性提交鏈接給百度，可以使用此種方式。
一般主動提交比手動提交效果好，這里介紹主動提交的三種方法
從效率上來說：
主動推送>自動推送>sitemap
安裝插件hexo-baidu-url-submit
npm install hexo-baidu-url-submit --save
然后再根目錄的配置文件中新增字段
baidu_url_submit:
count: 80 # 提交最新的一個鏈接
host: www.sunhwee.com # 在百度站長平臺中注冊的域名
token: xxxxxxxxxxxxxx # 請注意這是您的秘鑰， 所以請不要把博客源代碼發布在公眾倉庫里!
path: baidu_urls.txt # 文本文檔的地址， 新鏈接會保存在此文本文檔里
再加入新的deploy：
deploy:
- type: baidu_url_submitter
如圖所示：
注意,這里多個 type 的寫法應該這么寫**,前面那個 type 是我推送到 Github 與 Coding的page頁面的配置,后面再講這個。
密鑰的獲取位置在網頁抓取中的鏈接提交這一塊,如下所示:
這樣執行hexo deploy的時候，新的鏈接就會被推送了。
推送成功時,會有如下終端提示
在主題配置文件下設置,將baidu_push設置為true:
在主題配置文件下設置,將baidu_push設置為true:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
然后主題文件目錄加入下面代碼，一般在目錄
/themes/matery/layout/_partial中的head.ejs中加入下面JS代碼（有可能你的目錄不是這樣，原理類似），這樣全站都有了：
<% if (theme.baidu_push) { %>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<% } %>
這樣每次訪問博客中的頁面就會自動向百度提交sitemap
將我們上一步生成的sitemap文件提交到百度就可以了~
百度收錄過程還是蠻久的，需要大家耐心等待一下，提交鏈接在站長工具中有顯示大概是要兩天，站點被百度收錄大概花了半個月= =，收錄了之后，可以在百度搜索site: xxxxx.com可以搜索到結果
相比于百度，google的效率實在不能更快，貌似十分鐘左右站點就被收錄了，其實方法是和百度是一樣的。
google站點平臺：
https://www.google.com/webmasters/
向 google 添加 sitemap 后: 進入 Google Search Console - 抓取 - 站點地圖,點擊「添加/測試站點地圖」,輸入你的博客網址. 若無報錯則站點地圖提交成功
一步一步來就好，過不了過久就可以被google收錄了
robots.txt 是一種存放于網站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網站中哪些內容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成后在站點目錄 /public/ 下。
robots.txt 是一種存放于網站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網站中哪些內容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成后在站點目錄 /public/ 下。
我的 robots.txt 文件內容如下：
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
除了百度和google兩大搜索引擎，還有搜狗、360等其他的搜索引擎，流程都是一樣的，大家就自行選擇添加哈，這里就不再贅述了~
seo搜索引擎優化認為，網站的最佳結構是用戶從首頁點擊三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：
sitename/year/mounth/day/title四層的結構，這樣的url結構很不利于seo，爬蟲就會經常爬不到我們的文章，于是，我們需要優化一下網站文章url
方案一：
我們可以將url直接改成sitename/title的形式，并且title最好是用英文，在根目錄的配置文件下修改permalink如下：
url: https://sunhwee.com
root: /
permalink: :title.html
permalink_defaults:
方案二：
使用插件優化url
插件hexo-abbrlink實現了這個功能，它將原來的URL地址重新進行了進制轉換和再編碼。
安裝hexo-abbrlink。
npm install hexo-abbrlink --save
配置博客根目錄下的_config.yml文件。
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 進制：dec(default) and hex
運行hexo clean和hexo g命令來重新生成文件看看，可以清楚的看到，URL結構成功變為了3層。
seo優化應該說是一個收益延遲的行為，可能你做的優化短期內看不到什么效果，但是一定要堅持，seo優化也是有很深的可以研究的東西，從我們最初的網站設計，和最基礎的標簽的選擇都有很大的關系，網站設計就如我們剛剛說的，要讓用戶點擊三次可以到達網站的任何一個頁面，要增加高質量的外鏈，增加相關推薦（比如說我們經常見到右側本站的最高閱讀的排名列表），然后就是給每一個頁面加上keyword和描述
在代碼中，我們應該寫出能讓瀏覽器識別的語義化HTML，這樣有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；并且對外鏈設置nofollow標簽，避免spider爬著爬著就爬出去了（減少網站的跳出率），并且我們要盡量在一些比較大的網站增加我們站點的曝光率，因為spider會經常訪問大站，比如我們在掘金等技術社區發表文章中帶有我們的站點，這樣spider是很有可能爬到我們中的站點的，so....
由于代碼高亮插件prism_plugin的樣式沒有行號顯示和代碼塊整體復制功能，不是很方便，為了優化觀感和易用性，我們可以對其進行修改：
待續......
我們在配置文件.yml中找到prism_plugin配置項line_number: false（# default false）改為true，開啟行號，但是在我們這個matery主題中中是無效的，有bug需要改一下matery.css樣式參數,在第95行位置將：
pre {
padding: 1.5rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
改為：
pre {
padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
注釋掉緊接著的code代碼塊里面的font-size項，如下：
code {
padding: 1px 5px;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
/*font-size: 0.91rem;*/
color: #e96900;
background-color: #f8f8f8;
border-radius: 2px;
}
好了這下可以顯示行號了，如圖：
issue問題：
優化網站加載邏輯問題：圖片最后加載，加入圖片懶加載方法
hexo-lazyload-image的作用原理是講你博客里面img標簽的src屬性替換為一個loading image，把真實的圖片地址放在data-origin屬性下面。然后當你的網頁翻到那張圖片時（也就是圖片在窗口中完全可見時），他會有一段js用data-origin的內容替換src，打到懶加載的目的。
一般情況下懶加載和gallery插件會發生沖突，比如按照我上面所說，最終結果就會變成，可能只有第一張圖片在gallery中打開是原圖，右翻左翻都會是那張loading image，需要你掌握js，可以修改matery.js里面的內容，甚至可能換一個gallery，比如photosiwpe之類的
解決方法：修改/themes/matery/source/js中的matery.js文件
第103行：
$('#articleContent, #myGallery').lightGallery({
selector: '.img-item',
// 啟用字幕
subHtmlSelectorRelative: true,
showThumbByDefault: false //這句加上
});
后面加上：
$(document).find('img[data-original]').each(function(){
$(this).parent().attr("href", $(this).attr("data-original"));
});
再裝個插件，
https://github.com/Troy-Yang/hexo-lazyload-image
在博客根目錄配置.yml文件加入對應字段，如下：
# lazyload configuration 2019.08.23
lazyload:
enable: true
onlypost: false
loadingImg: # eg ./images/loading.gif
好了，這樣實現了博客網站的圖片懶加載。
Gulp實現代碼壓縮，以提升網頁加載速度。
1 首先我們需要安裝Gulp插件和5個功能模塊，依次運行下面的兩條命令。
npm install gulp -g #安裝gulp
# 安裝功能模塊
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 額外的功能模塊
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save
2 接下來在博客的根目錄下新建gulpfile.js文件，并復制下面的內容到文件中。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css壓縮組件
var uglify = require("gulp-uglify"); //js壓縮組件
var htmlmin = require("gulp-htmlmin"); //html壓縮組件
var htmlclean = require("gulp-htmlclean"); //html清理組件
var imagemin = require("gulp-imagemin"); //圖片壓縮組件
var changed = require("gulp-changed"); //文件更改校驗組件
var gulpif = require("gulp-if"); //任務 幫助調用組件
var plumber = require("gulp-plumber"); //容錯組件（發生錯誤不跳出任務，并報出錯誤內容）
var isScriptAll = true; //是否處理所有文件，(true|處理所有文件)(false|只處理有更改的文件)
var isDebug = true; //是否調試顯示 編譯通過的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一個hexo對象
// 清除public文件夾
gulp.task("clean", function() {
return del(["public/**/*"]);
});
// 下面幾個跟hexo有關的操作，主要通過hexo.call()去執行，注意return
// 創建靜態頁面 （等同 hexo generate）
gulp.task("generate", function() {
return hexo.init().then(function() {
return hexo
.call("generate", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 啟動Hexo服務器
gulp.task("server", function() {
return hexo
.init()
.then(function() {
return hexo.call("server", {});
})
.catch(function(err) {
console.log(err);
});
});
// 部署到服務器
gulp.task("deploy", function() {
return hexo.init().then(function() {
return hexo
.call("deploy", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 壓縮public目錄下的js文件
gulp.task("compressJs", function() {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5檢查機制
})
)
.pipe(uglify()) //調用壓縮組件方法uglify(),對合并的文件進行壓縮
.pipe(gulp.dest("./public")); //輸出到目標目錄
});
// 壓縮public目錄下的css文件
gulp.task("compressCss", function() {
var option = {
rebase: false,
//advanced: true, //類型：Boolean 默認：true [是否開啟高級優化（合并選擇器等）]
compatibility: "ie7" //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //類型：Boolean 默認：false [是否保留換行]
//keepSpecialComments: '*' //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 壓縮public目錄下的html文件
gulp.task("compressHtml", function() {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略處理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊處理
};
var minOption = {
collapseWhitespace: true, //壓縮HTML
collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注釋
minifyJS: true, //壓縮頁面JS
minifyCSS: true, //壓縮頁面CSS
minifyURLs: true //替換頁面URL
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
// 壓縮 public/uploads 目錄內圖片
gulp.task("compressImage", function() {
var option = {
optimizationLevel: 5, //類型：Number 默認：3 取值范圍：0-7（優化等級）
progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
multipass: false //類型：Boolean 默認：false 多次優化svg直到完全優化
};
return gulp
.src("./public/medias/**/*.*")
.pipe(gulpif(!isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public"));
});
// 執行順序： 清除public目錄 -> 產生原始博客內容 -> 執行壓縮混淆 -> 部署到服務器
gulp.task(
"build",
gulp.series(
"clean",
"generate",
"compressHtml",
"compressCss",
"compressJs",
"compressImage",
gulp.parallel("deploy")
)
);
// 默認任務
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
)
);
//Gulp4最大的一個改變就是gulp.task函數現在只支持兩個參數，分別是任務名和運行任務的函數
3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。
注意，很可能你會運行到第三步，也就是運行gulp壓縮命令時會報錯，如圖所示：
那是因為gulp安裝的本地版本和hexo自帶的版本不對應導致，第三步gulp壓縮可以用下面命令強制使用本地版本：
node ./node_modules/gulp/bin/gulp.js
有時候我們想換一臺電腦繼續寫博客，最簡單的方法就是把博客整個目錄拷貝過去，就是這么暴力。不過，這種方法有個問題就是要是那天電腦崩了，本地源文件丟失了，比較麻煩，所以這時候就可以將博客目錄下的所有源文件都上傳到github上面。
首先在github博客倉庫下新建一個分支hexo，然后git clone到本地，把.git文件夾拿出來，放在博客根目錄下。
然后git branch -b hexo切換到hexo分支，然后git add .，然后git commit -m "xxx"，最后git push origin hexo提交就行了。
具體效果可以看我的博客源文件倉庫：傳送門。
大家也可以先用下文hexo安裝方法安裝完hexo，然后直接git clone -b hexo
https://github.com/shw2018/shw2018.github.io.git克隆我的所有源文件，這是我目前修改完的基本沒bug的定制化的博客，可以直接拿來用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
