什么是靜態網站生成器？顧名思義，就是以最快的速度生成一個高可用的web頁面，我們知道Django作為一款非常流行的框架被廣泛應用，但是部署起來實在是太麻煩了，各種命令各種配置，動態頁面必然要涉及數據庫的配置和操作，另外只要涉及數據庫操作，你就不得不考慮sql注入等一系列的安全因素。而純靜態頁面則沒有這個煩惱，如果我們只需要一個簡單的站點，一些簡單的功能和頁面，比如博客，我們只想以極簡的方式用markdown語法寫下文字或者代碼，讓服務器訪問純靜態頁面，這就是靜態網站生成器可以提供給我們的好處。
為啥選擇hexo？
適用於搭建個人blog、公司主頁、help等網站，是一種小型的CMS系統。靜態站點的好處就是快速、安全、易於部署，方便管理。
豐富的站點遷移工具，可以將wordpress，Ghost，Jekyll，DokuWiki，Blogger輕松遷移至 Hugo
超詳細的文檔
活躍的社區
更加自由的內容組織方式
豐富的主題模板，可以讓你的網站更加炫目多彩
文檔為Markdown格式,語法超簡單
hexo安裝命令：
- npm install hexo-cli -g
- hexo init blog
- cd blog
- npm install
- hexo server
這就是一個初始化的博客頁面了
hexo serve：啟動服務r
hexo generate：打包靜態頁面
hexo new post "<post name>" ：創建文章
hexo clean ：清楚緩存
hexo server -s :運行靜態頁面
有些特殊符號不能使用所以只能使用替換的字符：
! ! — 驚嘆號 Exclamation mark
” " " 雙引號 Quotation mark
# # — 數字標志 Number sign
$ $ — 美元標志 Dollar sign
% % — 百分號 Percent sign
& & & Ampersand
‘ ' — 單引號 Apostrophe
( ( — 小括號左邊部分 Left parenthesis
) ) — 小括號右邊部分 Right parenthesis
* * — 星號 Asterisk
+ + — 加號 Plus sign
< < < 小於號 Less than
= = — 等於符號 Equals sign
- - − — 減號
> > > 大於號 Greater than
? ? — 問號 Question mark
@ @ — Commercial at
[ [ --- 中括號左邊部分 Left square bracket
\ \ --- 反斜杠 Reverse solidus (backslash)
] ] — 中括號右邊部分 Right square bracket
{ { — 大括號左邊部分 Left curly brace
| | — 豎線Vertical bar
} } — 大括號右邊部分 Right curly brace
還有一些hexo的語法命令:
標簽插件和 Front-matter 中的標簽不同，它們是用於在文章中快速插入特定內容的插件。
引用塊
在文章中插入引言，可包含作者、來源和標題。
別號： quote
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
樣例
沒有提供參數，則只輸出普通的 blockquote
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
引用書上的句子
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
David LevithanWide Awake
引用 Twitter
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
@DevDocstwitter.com/devdocs/status/356095192085962752
引用網絡上的文章
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
Every interaction is both precious and an opportunity to delight.
Seth GodinWelcome to Island Marketing
代碼塊
在文章中插入代碼。
別名： code
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}
樣例
普通的代碼塊
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');
指定語言
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
附加說明
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
Array.map
array.map(callback[, thisArg])
附加說明和網址
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
反引號代碼塊
另一種形式的代碼塊，不同的是它使用三個反引號來包裹。
``` [language] [title] [url] [link text] code snippet ```
Image
在文章中插入指定大小的圖片。
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
Link
在文章中插入鏈接，並自動給外部鏈接添加 target="_blank" 屬性。
{% link text url [external] [title] %}
Vimeo
在文章中插入 Vimeo 視頻。
{% vimeo video_id %}
hexo就會把你的站點生成純靜態頁面，然后打包到public文件夾
將public上傳到阿里雲服務器的root目錄下
修改nginx配置文件
vim /etc/nginx/conf.d/default.conf
監聽80端口，並且項目目錄指定/root/public
server {
listen 80;
server_name localhost;
access_log /root/md_vue_access.log;
error_log /root/md_vue_error.log;
client_max_body_size 75M;
location / {
root /root/public;
index index.html;
}
error_log /root/md_vue/error.log error;
}
重啟nginx systemctl restart nginx.service 然后訪問一下
這是hexo的官方文檔：https://hexo.io/zh-cn/docs/
這里面有語法以及很多主題的選擇
這就是我的hexo私人博客：有興趣的可以訪問以下：https://v7d.cn/
