GitHub+Hexo 搭建個人網站 本文已同步到專業技術網站 www.sufaith.com, 該網站專註於前後端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊. 一、創建GitHub Pages站點 GitHub Pages是一種靜態站點託管服務,旨在直接從GitHub倉庫託管您的個人,組織或項目頁面。每個GitHub帳戶和組織都有一個站點。 1.新建倉庫 訪問GitHub官網 https://github.com 登陸GitHub賬號,新建倉庫,名稱固定格式為: <username>.github.io其中username是GitHub上的用戶名(或組織名稱)如果倉庫名稱的第一部分與您的用戶名不完全匹配,則無法正常工作,因此請務必正確使用。 2.將倉庫代碼clone到本地 使用SSH或HTTPS方式, 將倉庫代碼拉取到本地(SSH方式需要配置SSH keys, HTTPS方式需要輸入賬號密碼) 3.本地新建index.html文件 4.將本地代碼推送到github 5. 訪問站點 在瀏覽器中訪問 http://.github.io, 即可訪問到你的網站首頁, 內容為你剛才新建的index.html文件 二、自定義域名 1.項目代碼中設置自定義域名(創建CNAME文件) 點擊當前項目的【Settings】, 在【Custom domain】一欄輸入你自定義的二級域名, 然後點【Save】 此時會在你的項目根目錄下會自動生成一個CNAME文件, 文件內容為你自定義的二級域名。 2.域名解析中添加CNAME類型的解析記錄 登陸到你自己的域名管理後臺,新增一條CNAME類型的域名解析記錄, 內容如下: 記錄類型: CNAME 主機記錄: 自定義的二級域名 記錄值: .http://github.io 保存後, 稍等幾分鐘,在瀏覽器訪問你自定義的二級域名即可正常鏈接到你的github個人網站。 三、Hexo搭建網站 Hexo官網中文版 https://hexo.io/zh-cnHexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。 1.安裝Hexo (1) 安裝依賴的應用程序: Node.js (最低支持版本6.9,下載地址: https://nodejs.org/en) Git (下載地址:https://git-scm.com/download) (2) 使用 npm 安裝全局安裝Hexo 如果npm安裝速度過慢, 可使用淘寶NPM鏡像(http://npm.taobao.org) 代替npm$ npm install -g hexo-cli 2.Hexo新建項目 (1) 新建網站項目, 並安裝依賴庫在本地電腦上, 指定一個文件夾用於存放hexo項目代碼, 執行以下指令:$ hexo init <folder> $ cd <folder> $ npm install 新建完成後,指定文件夾的目錄如下:. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes (2) 本地預覽首先在當前項目下, 安裝 hexo-server 模塊npm install hexo-server --save 安裝完成後,輸入以下命令以啟動伺服器,您的網站會在 http://localhost:4000 下啟動。在伺服器啟動期間,Hexo 會監視文件變動並自動更新,您無須重啟伺服器。hexo server 瀏覽器訪問 http://localhost:4000, 即可訪問網站首頁。 3.Hexo配置與部署 (1) 修改配置文件_config.yml 安裝 hexo-deployer-git依賴庫 npm install hexo-deployer-git --save 修改配置(改為你自己的GitHub項目地址, 並且確保GitHub已配置了你當前機器的SSH密鑰) deploy: type: git repo: <repository url> #git@github.com:sufaith/sufaith.github.io.git branch: [branch] #master message: [message] repo: 庫(Repository)地址 branch: 分支名稱。 message: 自定義提交信息 (默認為 Site updated: {{ now(YYYY-MM-DD HH:mm:ss) }}) 將url 修改為 您的站點網址 http://yoursite.com/ (2) source目錄下,創建CNAME文件CNAME文件的內容為你自定義的二級域名 (3) 生成靜態文件hexo generate #簡寫為: hexo g 執行 hexo generate g命令後, 會在項目根目錄下自動生成 public 文件夾, 該文件夾即是我們網站所需的靜態文件。 (4) 一鍵部署靜態文件至github#先清除站點文件,然後重新生成站點文件並將之推送到指定的庫分支 hexo clean && hexo deploy #簡寫為: hexo clean && hexo d 執行命令後, 成功將生成的靜態文件推送到GitHub。 (5) 訪問網站在瀏覽器輸入你自定義的二級域名, 即可正常訪問到你用GitHub+Hexo搭建的網站。 推薦閱讀: 相關文章 {{#data}} {{title}} {{/data}}