利用hexo來配合nginx來打造屬於本身的純靜態博客系統

什麼是靜態網站生成器？顧名思義，就是以最快的速度生成一個高可用的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 :運行靜態頁面

 

有些特殊符號不能使用因此只能使用替換的字符：

! &#33; — 驚歎號 Exclamation mark
」 &#34; &quot; 雙引號 Quotation mark
# &#35; — 數字標誌 Number sign
$ &#36; — 美圓標誌 Dollar sign
% &#37; — 百分號 Percent sign
& &#38; &amp; Ampersand
‘ &#39; — 單引號 Apostrophe
( &#40; — 小括號左邊部分 Left parenthesis
) &#41; — 小括號右邊部分 Right parenthesis
* &#42; — 星號 Asterisk
+ &#43; — 加號 Plus sign
< &#60; &lt; 小於號 Less than
= &#61; — 等於符號 Equals sign
- &#45; &minus; — 減號
> &#62; &gt; 大於號 Greater than
? &#63; — 問號 Question mark
@ &#64; — Commercial at
[ &#91; --- 中括號左邊部分 Left square bracket
\ &#92; --- 反斜槓 Reverse solidus (backslash)
] &#93; — 中括號右邊部分 Right square bracket
{ &#123; — 大括號左邊部分 Left curly brace
| &#124; — 豎線Vertical bar
} &#125; — 大括號右邊部分 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/