Markdown打造高逼格博客

本文轉載自查看原文 2018-07-03 18:51 3528 GitHub

這里首先假設讀者你已經掌握了Markdown與GitHub的基本用法

如果不會, 請先自行百度或Google, 我目前還沒寫Markdown與GitHub的教程
看雲只是一個推薦, 可以認為協助生成格式化Markdowns, 不用當然也可以手寫, 這里只是本人推薦而已
想先看結果的請直接拉到底

你需要這么幾個材料：

在線文章生成網站, 首推“看雲”

鏈接地址: 看雲
終端命令行

Windows使用powershell, Mac與Linux自帶即可
編輯器(可選)

如: VS Code, Atom, Sublime等等
GitHub賬號

鏈接地址: GitHub

詳細步驟(圖文)

看雲篇(書寫)
- 創建文檔()
- 文檔信息填寫
- 前往編輯文檔
- 新建章節
- 新建章節的基本信息
- 編輯或修改章節
- Markdown編輯與內容提交
- 新建子級章節
- 新建子級章節的基本信息
- 新建真正的子級章節的注意點
- 子級章節在看雲看起來一樣, 但是注意新建方式不同導致的不同
- 完成並同步
看雲篇(獲取git地址)
- 返回文章概要(或手動前往)
- 前往文章設置
- 獲取git地址
拉取看雲文章源代碼

如果你真沒git, Windows請搜一下git bash, Mac命令行輸入git然后點擊安裝即可,
- 使用powershell或其他命令行工具(Mac與Linux一樣)
  
  cd .\Desktop\
  
  git clone https://git.kancloud.cn/zweizhao/kancloudtest.git (地址請使用你自己的)
  
  cd .\kancloudtest\
GitHub創建你的博客倉庫
- 創建倉庫
- 倉庫信息
- 倉庫地址
源代碼添加GitHub的倉庫

git remote set-url --add origin https://github.com/ZweiZhao/blogs.git (地址請使用你自己的)

或手動添加
將代碼推到GitHub

git push origin master
GitHub內容更新及查看
- 注意上文說的子級區別
- 這里缺少README.md文件, 后續會補上
設置GitHub Pages(就是博客)
- 前往GitHub倉庫的設置
- 設置pages
  
  向下滾動
  
  選好點擊save保存
  
  保存成功后滾回來
  
  就是這個地址, 你的博客生成好了
- 打開會報錯, 404
  
  原因就是剛剛說的沒有README.md文件
- 添加README.md文件
  - 回到源代碼, 並使用你的編輯工具在根目錄創建一個README.md文件, 寫入如下內容並保存
- git操作提交
  
  git add .
  
  git commit -m '添加README.md'
  
  git push origin master
  
  刷新GitHub倉庫, 源碼出現README.md文件
- 博客頁面正常顯示點擊有交互
到這里,一個標准的GitHub Pages完成, 但是缺乏美感的程序員或者吃瓜群眾是很難再樣式上優化出什么花, 尤其是在使用Markdown的時候, 下面就是真正優(zhuang)化(bi)的時候了
優化時候
- 打開GitHub倉庫設置並前往pages所在位置
- 選擇一個你覺得好看的主題並確認
- 刷新你的博客頁, 如有必要, 請清理緩存一下, 再刷新
打完收工

最后有個坑注意一下, 就是你這邊對主題修改后, 改動的是GitHub的源代碼, 而你之前的主倉庫是看雲的, 所以這里你需要再項目的 .git/config 文件內修改一下兩個倉庫的位置, 如下:
- 各種編輯器打開 .git/config, 我用的是vim
- 替換前
- 替換后
- 拉取代碼並提交
  
  git pull origin master
  
  git push origin master
- 然后再替換回來即可
  
  除非你下次再更換主題, 否則基本不用再這一步了
最后大家看看我的GitHub Pages

zweizhao.github.io

綁定域名后的

www.zweizhao.com