001-Build-A-Technical-Web-Site-Immediately

時間 2019-11-20

標籤 build technical web site immediately 欄目 HTML 简体版

原文原文鏈接

title: 從零開始構建一個技術博客站點
category: 網站運維
date: 2019-03-29 11:30:00
---html

閱讀導覽：node

使用Git+Node.JS+Hexo快速搭建技術博客站點
「腳本小子」的博客站點配置詳細步驟
Markdown技巧簡明攻略
安利一個趁手好用的Markdown創做工具：Typora
使用GitHub圖牀完全解決Markdown插入圖片困難的煩惱

~~立刻開吃！~~linux

初始化環境

使用Git+Node.JS+Hexo做爲搭建博客站點的基礎環境git

特色：輕量、使用靜態頁面、佔用更少的系統資源（相比WordPress）github

Windows10x64安裝必要的環境

第一步：安裝Git

下載 Git for Windows 64-bitweb

https://git-scm.com/download/winnpm

下載後請手動安裝windows

安裝後打開「開始--全部程序--Git--Git Bash」centos

驗證當前安裝的Git版本api

$ git --version

git version 2.21.0.windows.1

第二步：安裝Node.JS

下載 Node.JS 10.15.3LTS Windows Installer 64-bit

https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi

下載後請手動安裝

安裝後打開「開始--全部程序--Git--Git Bash」

驗證當前安裝的node版本

$ node --version

v10.15.3

第三步：安裝Hexo

打開「開始--全部程序--Git--Git Bash」

使用命令方式在線安裝

$ npm install -g hexo-cli

驗證當前安裝的hexo工具集版本

$ hexo --version

hexo-cli: 1.1.0
os: Windows_NT 10.0.17763 win32 x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

CentOS7.4x64安裝必要的環境

第一步：安裝附加工具

須要先安裝wget下載工具

$ yum install wget -y

第二步：安裝Git

使用CentOS 7.4 DVD自帶的Git版本

$ yum install git-core -y

驗證當前的git版本

$ git --version

git version 1.8.3.1

第三步：安裝Node.JS

下載Node.JS 10.15.3LTS Linux Binaries x64

$ wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz

解壓縮和部署，須要手動建立軟連接

$ tar xvf node-v10.15.3-linux-x64.tar.xz
$ mkdir -pv /opt/tools
$ mv node-v10.15.3-linux-x64 /opt/tools/
$ ln -s /opt/tools/node-v10.15.3-linux-x64/bin/node /usr/bin/node
$ ln -s /opt/tools/node-v10.15.3-linux-x64/bin/npm /usr/bin/npm

驗證安裝是否成功

$ ls -ld /usr/bin/{node,npm}

lrwxrwxrwx. 1 root root 43 Mar 29 21:23 /usr/bin/node -> /opt/tools/node-v10.15.3-linux-x64/bin/node
lrwxrwxrwx. 1 root root 42 Mar 29 21:23 /usr/bin/npm -> /opt/tools/node-v10.15.3-linux-x64/bin/npm

驗證當前的node版本

$ node --version

v10.15.3

第四步：安裝Hexo

使用命令方式在線安裝，須要手動建立軟連接

$ npm install -g hexo-cli
$ ln -s /opt/tools/node-v10.15.3-linux-x64/bin/hexo /usr/bin/hexo

驗證安裝是否成功

$ ls -ld /usr/bin/hexo

lrwxrwxrwx. 1 root root 43 Mar 29 21:35 /usr/bin/hexo -> /opt/tools/node-v10.15.3-linux-x64/bin/hexo

驗證當前安裝的hexo工具集版本

$ hexo --version

hexo-cli: 1.1.0
os: Linux 3.10.0-693.el7.x86_64 linux x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

開始建站

下面步驟以Windows10x64平臺爲例，CentOS7.4x64平臺一樣適用

Windows10x64平臺下的命令行操做所有在Git Bash環境下進行，下面再也不贅述！

初始化站點

第一步：建立你的博客站點目錄

$ mkdir -pv /f/Blog && cd /f/Blog/ && pwd

/f/Blog

第二步：下載站點所需文件

$ hexo init

第三步：下載`Next`主題

$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

第四步：刪除默認主題

$ rm -rf themes/landscape

第五步：修改`站點配置文件`

站點配置文件：博客站點根目錄下的_config.yml文本文件，路徑：./_config.yml

將站點配置文件的theme: landscape替換爲theme: next

$ sed -ri 's/(theme: )landscape/\1next/' ./_config.yml
$ grep 'theme:' ./_config.yml

theme: next

修改爲功！

第六步：測試站點配置

$ hexo clean && hexo generate && hexo server

INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

看到上面的信息時，請手動打開Google Chrome瀏覽器，在瀏覽器地址欄輸入下面地址並回車

http://localhost:4000

看到下面的頁面，證實站點初始化成功，恭喜！

必要的站點配置

聲明：
站點配置文件：博客站點根目錄下的_config.yml文本文件，路徑：./_config.yml
主題配置文件：Next主題目錄下的_config.yml文本文件，路徑：./themes/next/_config.yml
建議使用Sublime Text 3打開站點配置文件和主題配置文件進行查看
Sublime Text 3經常使用快捷鍵以下

快捷鍵	操做說明
`Ctrl+f`	打開搜索窗格
`Ctrl+e`	使用鼠標選中的字符串做爲搜索關鍵詞
`F3`	查找下一個
`Shift+F3`	查找上一個
`Ctrl+h`	打開替換窗格
`Ctrl+Shift+e`	使用鼠標選中的字符串做爲替換關鍵詞
`Ctrl+Shift+h`	替換下一個

第一步：確認當前工做目錄

切換到博客站點根目錄下

$ cd /f/Blog/ && pwd

/f/Blog

第二步：修改站點語言與時區

修改站點配置文件：

設置站點語言爲zh-CN
設置站點時區爲Asia/Shanghai

$ # 設置站點語言爲 zh-CN
$ sed -ri 's/(language:)/\1 zh-CN/' ./_config.yml
$ # 設置站點時區爲 Asia/Shanghai
$ sed -ri 's/(timezone:)/\1 Asia\/Shanghai/' ./_config.yml
$ # 查詢修改結果
$ grep -E 'language:|timezone:' ./_config.yml

language: zh-CN
timezone: Asia/Shanghai

修改爲功！

第三步：更換Scheme

修改主題配置文件：

啓用Gemini的Scheme
需同時禁用其餘的Scheme

$ # 禁用 Muse
$ sed -ri 's/(scheme: Muse)/#\1/' ./themes/next/_config.yml
$ # 啓用 Gemini
$ sed -ri 's/#(scheme: Gemini)/\1/' ./themes/next/_config.yml
$ # 查詢修改結果
$ grep -E 'scheme: Muse|scheme: Gemini' ./themes/next/_config.yml

scheme: Muse

scheme: Gemini

修改爲功！

第四步：修改站點我的信息

修改站點配置文件：

站點標題title設置爲攻城獅博客
站點描述subtitle設置爲攻城獅打怪升級之路
做者author設置爲攻城獅
站點連接url設置爲http://blog.uman-tech.cn

$ # 站點標題設置爲 攻城獅博客
$ sed -ri 's/(title:).*/\1 攻城獅博客/' ./_config.yml
$ # 站點描述設置爲 攻城獅打怪升級之路
$ sed -ri 's/(subtitle:).*/\1 攻城獅打怪升級之路/' ./_config.yml
$ # 做者設置爲 攻城獅
$ sed -ri 's/(author:).*/\1 攻城獅/' ./_config.yml
$ # 站點連接設置爲 http://blog.uman-tech.cn
$ sed -ri 's/(url:).*/\1 http:\/\/blog.uman-tech.cn/' ./_config.yml
$ # 查詢修改結果
$ grep -E 'title:|subtitle:|author:|url:' ./_config.yml

title: 攻城獅博客
subtitle: 攻城獅打怪升級之路
author: 攻城獅
url: http://blog.uman-tech.cn

修改爲功！

第五步：修改站點主菜單

修改主題配置文件：

啓用about關於頁面
啓用categories分類頁
手動建立about關於頁面
手動建立categories分類頁

$ # 啓用 about
$ sed -ri 's/(.*)#(about:.*)/\1\2/' ./themes/next/_config.yml
$ # 啓用 categories
$ sed -ri 's/(.*)#(categories:.*)/\1\2/' ./themes/next/_config.yml
$ # 手動建立 about
$ hexo new page about > /dev/null
$ # 手動建立 categories
$ hexo new page categories > /dev/null
$ # 查詢修改結果
$ grep -E 'about:|categories:|home:|archives:' ./themes/next/_config.yml

home: / || home
about: /about/ || user
categories: /categories/ || th
archives: /archives/ || archive
categories: true
display_in_home: false
home: true

修改爲功！

第六步：更改側邊欄展現位置

修改主題配置文件：

啓用position: right，將側邊欄移到頁面右側
需同時禁用position: left

$ # 禁用 position: left
$ sed -ri 's/(.*)(position: left)/\1#\2/' ./themes/next/_config.yml
$ # 啓用 position: right
$ sed -ri 's/(.*)#(position: right)/\1\2/' ./themes/next/_config.yml
$ # 查詢修改結果
$ grep -E 'position: left|position: right' ./themes/next/_config.yml

#position: left
position: right

修改爲功！

第七步：站點底部添加備案信息

修改主題配置文件：

禁用由Hexo強力驅動展現模塊
禁用主題-NexT.Gemini展現模塊
啓用備案信息展現模塊
添加備案號粵ICP備19027521號，注意：該備案號所屬信息歸本站點管理員全部

$ # 禁用「由Hexo強力驅動」展現模塊
$ sed -ri '/Powered by Hexo/{n;s/(.*enable: )true/\1false/}' ./themes/next/_config.yml
$ # 禁用「主題-NexT.Gemini」展現模塊
$ sed -ri '/NexT.scheme/{n;s/(.*enable: )true/\1false/}' ./themes/next/_config.yml
$ # 啓用「備案信息」展現模塊
$ sed -ri '/beian:/{n;s/(.*enable: )false/\1true/}' ./themes/next/_config.yml
$ # 添加備案號「粵ICP備19027521號」，注意：該備案號所屬信息歸本站點管理員全部
$ sed -ri 's/(.*icp:)/\1 粵ICP備19027521號/' ./themes/next/_config.yml
$ # 查詢修改結果
$ sed -n '/powered:/,/icp:/p' ./themes/next/_config.yml

輸出信息以下所示：

powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # http://www.miitbeian.gov.cn
  beian:
    enable: true
    icp: 粵ICP備19027521號

修改爲功！

第八步：文章底部添加版權說明

修改主題配置文件：

啓用版權聲明展現模塊
設置版權聲明支持的語言爲deed.zh

$ # 啓用「版權聲明」展現模塊
$ sed -ri 's/(.*post: )false/\1true/' ./themes/next/_config.yml
$ # 設置「版權聲明」支持的語言爲 deed.zh
$ sed -ri '/post: true/{n;s/(.*language:)/\1 deed.zh/}' ./themes/next/_config.yml
$ # 查詢修改結果
$ sed -n '/creative_commons:/,/language: deed.zh/p' ./themes/next/_config.yml

license: by-nc-sa
sidebar: false
post: true
language: deed.zh

修改爲功！

網頁效果展現以下：

本文做者：攻城獅
本文連接： http://blog.uman-tech.cn/2019/03/29/hello-world/
版權聲明：本博客全部文章除特別聲明外，均採用 cc BY-NC-SA 許可協議。轉載請註明出處！

第九步：添加站內搜索

一、在站點配置文件文件末尾處追加如下新行：

$ # 在「站點配置文件」文件末尾處追加如下新行
$ cat >> ./_config.yml << EOF

# 啓用本地搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
EOF
$ # 查詢修改結果
$ tail -12 ./_config.yml

輸出信息以下所示：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

# 啓用本地搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

二、修改主題配置文件，啓用本地搜索功能

$ # 啓用本地搜索功能
$ sed -ri '/local_search:/{n;s/(.*enable: )false/\1true/}' ./themes/next/_config.yml
$ # 查詢修改結果
$ sed -n '/local_search:/{n;p}' ./themes/next/_config.yml

enable: true

三、博客站點根目錄下安裝hexo-generator-search

$ npm install hexo-generator-search --save

輸出信息以下所示：（警告信息請忽略）

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-generator-search@2.4.0
added 1 package from 1 contributor and audited 6852 packages in 8.577s
found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

四、博客站點根目錄下安裝hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

輸出信息以下所示：（警告信息請忽略）

npm WARN deprecated ejs@1.0.0: Critical security bugs fixed in 2.5.5
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-generator-searchdb@1.0.8
added 3 packages from 3 contributors and audited 4701 packages in 8.708s
found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

五、安裝完成！

第十步：刷新博客站點

$ hexo clean && hexo generate && hexo server

INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

一切準備就緒！

使用Google Chrome瀏覽器訪問http://localhost:4000查看修改後的展現效果

開始創做

只需掌握少量的Markdown語法技巧，配合Typora所見即所得的實時渲染和GitHub強大持久的圖牀，便可快速高效地創做出簡潔優雅的博客文檔，熟練掌握後可以體驗到徹底擺脫Word格式束縛的暢快感！

Markdown語法

技巧一：添加標題

關鍵字	範例
#	`# 一級標題`
##	`## 二級標題`
###	`### 三級標題`

技巧二：代碼塊

`行內代碼`

行內代碼

```bash
多行代碼
多行代碼
多行代碼
```

多行代碼
多行代碼
多行代碼

技巧三：文本引用

> 一級引用
>
> > 二級嵌套引用
> >
> > （這是空行）
> >
> > 二級嵌套引用
> 
> 一級引用

一級引用

二級嵌套引用

（這是空行）

二級嵌套引用

一級引用

技巧四：建立列表

有序列表：（數字與點號之間不能有空格；點號後面有且僅有一個空格）
1. 第一項
2. 第二項
3. 第三項

有序列表：（數字與點號之間不能有空格；點號後面有且僅有一個空格）

第一項

第二項

第三項

無序列表：（減號後面有且僅有一個空格）
- 一級項目（行首不添加空格）
  - 二級項目（行首添加兩個空格）
    - 三級項目（行首添加四個空格）

無序列表：（減號後面有且僅有一個空格）

一級項目（行首不添加空格）

二級項目（行首添加兩個空格）

三級項目（行首添加四個空格）

技巧五：插入表格

| 第一列標題，左對齊 | 第二列標題，居中 | 第三列標題，右對齊 |
| :----------------- | :--------------: | -----------------: |
| 第一行，第一列     |  第一行，第二列  |     第一行，第三列 |
| 第二行，第一列     |  第二行，第二列  |     第二行，第三列 |
| 第三行，第一列     |  第三行，第二列  |     第三行，第三列 |

第一列標題，左對齊	第二列標題，居中	第三列標題，右對齊
第一行，第一列	第一行，第二列	第一行，第三列
第二行，第一列	第二行，第二列	第二行，第三列
第三行，第一列	第三行，第二列	第三行，第三列

技巧六：連接跳轉

帶文字描述的連接：
[攻城獅博客](http://blog.uman-tech.cn/)

帶文字描述的連接：

攻城獅博客

裸連接：
<http://blog.uman-tech.cn/>

裸連接：

http://blog.uman-tech.cn/

技巧七：圖片引用

網絡圖片引用（推薦）
![Engineer2019](<https://raw.githubusercontent.com/UMan-Tech/Gallery/master/Avatar/Engineer2019.jpg>)

網絡圖片引用（推薦）

技巧八：斜體/加粗/刪除線

書寫格式	效果演示
`斜體`	斜體
`加粗`	加粗
`*斜體加粗*`	*斜體加粗*
`~~刪除線~~`	~~刪除線~~

Typora實時渲染：「所見即所得」

簡潔優雅的Markdown

Markdown是一種純文本標記語言，語法簡單易懂，頁面渲染效果相似於HTML，是純文本型創做的最佳，選擇適合小白極速上手！

因爲Markdown文檔是純文本格式，文檔體積小、文檔內容徹底透明，因此不存在像Word文檔的文件體積龐大、容易感染宏病毒、格式排版繁瑣複雜等痛點。經過熟練運用Markdown，能夠輕鬆擺脫Word文檔格式的束縛！

「金無足赤、人無完人」，Markdown也存在如下的缺點：

沒法像Word同樣隨意插入圖片
使用「記事本」閱讀Markdown文檔的體驗很是糟糕
使用「記事本」創做Markdown文檔的體驗很是痛苦

專業的事要交給專業的人作！

Markdown創做方式，必須找專業的Markdown編輯器，而不是「記事本」之類的純文本編輯工具

衆多Markdown編輯器的痛點！

我用過不少Markdown編輯器（平臺）：網易雲筆記、印象筆記、博客園、CSDN、簡書。

我發現這些Markdown編輯器有一個共同的特色：寫字和預覽是分離的！兩種狀態各佔據窗口的左右兩側，對於我這種「屏幕空間小」的筆記本用戶來講簡直是災難！這樣的創做體驗遠不如Word文檔編輯時來的直觀爽快！

以上的Markdown編輯器，統統拋棄！

Typora是如何解決這個痛點的？

無心中發現了 Typora 這款 Markdown 編輯器。第一眼看上去它就像任何一款 Markdown 編輯器的同類，但再看一眼，你就發現，它是如此的不一樣！

由於它將「寫字」和「預覽」這兩件事情合併了，你輸入的地方，也是輸出的地方，即如今很流行的 WYSIWYG（What You See Is What You Get）。其實轉念一想，這不就是回到了 Office Word 嘛，只不過編輯文本時不用再去工具欄上點選，一切的格式都能經過符號來控制。

用 Typora 官方的介紹視頻，你就懂這一切是多麼的天然。沒錯，全部的行內元素（如加粗、斜體）都會根據當前是否在編輯態而智能地在編輯態和預覽態切換，而區塊級元素（如標題、列表）則會在按下 Enter 後即時渲染，不能再次編輯。

一切都變得如此乾淨、純粹！

選擇對的Markdown編輯器，認準Typora沒錯！

我使用的是Typora For Windows10x64

官方下載連接：Typora For Windows — a markdown editor, markdown reader.

GitHub圖牀：擺脫圖片託管的煩惱

第一步：註冊GitHub帳戶

點擊此連接打開註冊頁面：https://github.com/join?source=login

一、填寫用戶名、郵箱地址、密碼

二、選擇「免費」帳戶類型

三、GitHub的用戶背景調查問卷

四、提示須要驗證郵箱（不驗證則沒法使用該帳戶）

五、查看收件箱的最新一封郵件

六、點擊「驗證」按鈕

七、請忽略郵箱的瞎幾把「貼心」提醒

第二步：下載GitHub Desktop應用

一、下載GitHub Desktop for Windows (64bit)

https://desktop.githubusercontent.com/releases/1.6.5-b8b05c40/GitHubDesktopSetup.exe

二、手動安裝並首次啓動，出現歡迎界面，點擊第一個登陸入口，以避免費帳戶身份登陸到GitHub上

三、在GitHubDesktop上登陸剛纔註冊的GitHub帳號，注意不要寫錯用戶名、密碼

四、保持默認的Name和Email做爲Git的初始配置，直接點擊「繼續」

五、點擊「完成」

第三步：建立本地倉庫

一、選擇「在本地磁盤上建立一個新的倉庫」選項

二、填寫倉庫名稱（即「圖牀名稱」）、描述、倉庫的建立位置

三、點擊「發佈」按鈕，將剛剛建立的本地倉庫發佈到本身的GitHub空間上

四、將「保持私有」取消勾選，設置爲公開倉庫，這樣作才能方便後續的圖片連接無限制地被訪問到

五、本地倉庫建立成功，而且已經發布到本身的GitHub空間上了

第四步：上傳第一張圖片

一、打開資源管理器，先在C:\Gallery目錄下建立一個新目錄Avatar，而後在Avatar目錄下存放第一張照片

二、回到GitHubDesktop應用中，先確保剛纔存放的第一張照片被選中，而後填寫說明，最後點擊Commit to master「合併到主分支」按鈕

三、點擊這兩個Push origin「推送上傳」按鈕中的中的任意一個，將本地倉庫的變動操做推送保存到在線倉庫

第五步：查看在線倉庫的資源列表變化

一、經過菜單View on GitHub跳轉到GitHub上瀏覽在線倉庫

二、瀏覽GitHub在線倉庫資源列表，發現了剛剛上傳的那一張照片，點擊它！

第六步：獲取第一張圖片的公開訪問連接

一、點擊頁面中間靠右側的Download按鈕，頁面會在當前頁面打開這一張圖片的真正的公開訪問連接，即這張圖片的真實下載地址

二、這纔是真正的公開訪問連接！複製它，而後粘貼到Markdown文檔中去吧~

GitHub圖牀操做小結

GitHub圖牀操做分爲五步：

存放圖片
Commit to master合併到主分支
Push origin推送保存新的變動
Download點擊下載
複製真正的公開訪問連接

注意事項：

倉庫的目錄層次結構要提早作好規劃，對於已經存在的目錄和圖片，不要隨意修改其名稱
公開訪問連接包含完整的圖片文件名，強烈推薦以統一的格式對新增長的圖片進行命名規範管理
GitHub圖牀的公開訪問連接格式以下：
- https://raw.githubusercontent.com/用戶名/倉庫名/分支名/子目錄名/圖片名.格式後綴

更多相關文章...

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

001-Build-A-Technical-Web-Site-Immediately

初始化環境

Windows10x64安裝必要的環境

第一步：安裝Git

第二步：安裝Node.JS

第三步：安裝Hexo

CentOS7.4x64安裝必要的環境

第一步：安裝附加工具

第二步：安裝Git

第三步：安裝Node.JS

第四步：安裝Hexo

開始建站

初始化站點

第一步：建立你的博客站點目錄

第二步：下載站點所需文件

第三步：下載Next主題

第四步：刪除默認主題

第五步：修改站點配置文件

第六步：測試站點配置

必要的站點配置

第一步：確認當前工做目錄

第二步：修改站點語言與時區

第三步：更換Scheme

scheme: Muse

第四步：修改站點我的信息

第五步：修改站點主菜單

第六步：更改側邊欄展現位置

第七步：站點底部添加備案信息

第八步：文章底部添加版權說明

第九步：添加站內搜索

第十步：刷新博客站點

開始創做

Markdown語法

技巧一：添加標題

技巧二：代碼塊

技巧三：文本引用

技巧四：建立列表

技巧五：插入表格

技巧六：連接跳轉

技巧七：圖片引用

技巧八：斜體/加粗/刪除線

Typora實時渲染：「所見即所得」

簡潔優雅的Markdown

衆多Markdown編輯器的痛點！

Typora是如何解決這個痛點的？

選擇對的Markdown編輯器，認準Typora沒錯！

GitHub圖牀：擺脫圖片託管的煩惱

第一步：註冊GitHub帳戶

第二步：下載GitHub Desktop應用

第三步：建立本地倉庫

第四步：上傳第一張圖片

第五步：查看在線倉庫的資源列表變化

第六步：獲取第一張圖片的公開訪問連接

GitHub圖牀操做小結

第三步：下載`Next`主題

第五步：修改`站點配置文件`