喲呵,Github 免費從 0 到 1搭建個人博客網站

2021-02-15 學習python的正確姿勢
之前有朋友說想要搭建自己的博客玩玩,於是就有了這篇:
後來有些朋友覺得略麻煩,又要整伺服器整域名,又要搭建各種 PHP、Mysql 環境啥的,就單純的想寫寫文章裝個x,能不能不整那麼多花裡胡哨的東西?
好巧不巧,挺久之前我就寫過如何搭建以及使用 Github pages 來託管靜態博客網站的教程,姨媽巾式的範側漏那種:目錄 使用 Hexo 框架來搭建個人網站 這兩天我重新整理了一下自己的 Blog ,因為我之前用的 Octopress 框架,有些年頭了,一些主題和插件並不是很多。後來對比了幾個框架,發現 Hexo 不錯,和 Octopress 差不多,也是可以用 Markdown 寫文章,然後生成靜態網站,Hexo 主題豐富一些。Hexo 是基於 nodejs 的,搭建起來很簡單。那麼接下來就說說如何從 0 開始使用 Hexo 搭建個人博客吧。因為 hexo 是基於 node 框架的,所以呢,我們首先需要下載安裝node,下載地址:https://nodejs.cn/安裝完之後,我們打開命令窗口,輸入 node -v ,如果返回下圖所示,那麼就說明你安裝 node 成功了。

安裝成功後,我們在命令行窗口運行如下命令來安裝 hexo:

hexo init xxx.github.io (這裡的xxx換成你自己的英文名)

打開你的瀏覽器,輸入 localhost:4000 。自此,你的個人網站就這麼速度的搭建起來了!

優化 hexo 博客主題進入你的網站目錄,打開 _config 文件,這個文件是用來配置你的網站信息的。這裡列出我的簡單配置,具體可以看這個Hexo配置文檔:https://hexo.io/docs/configuration.html

title: fxxkpython
subtitle: 小帥b
description: xx的個人博客,主要涉及到編程(Java,Python,Linux等),個人提升學習,視頻教程
keywords: java,python,教程
author: wistbean
language: zh

選一個Hexo主題剛搭建完的網站,是不是覺得有點醜,不符合你的漂亮的臉龐?反正我是這麼覺得的,那麼就選一個主題來裝飾一下吧,在這裡可以選擇你要的主題,知乎答主們推薦的hexo主題大全:https://www.zhihu.com/question/24422335

下載Hexo主題慢慢挑,選擇好了你的主題之後,就可以下載主題資源了,比如我這裡選擇一個 NEXT 主題來演示一下,在你的目錄中輸入以下命令:

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

這裡主要就是將主題下載到我們的themes目錄下。配置主題主題下載完之後,在你根目錄下的 _config.yml 文件中,修改 theme 為你的主題名字:

重新生成和運行

訪問一下看看,是不是比之前好看多了?hexo博客的第一篇文章,打上標籤和分類你已經把你的網站打扮的漂亮大方簡潔惹人愛了,那麼接下來就要好好去寫內容了,內容才是重要的。兩種方式來新建你的博文命令形式

hexo new article (這裡的article寫上你的文章的名稱)

輸入這樣的命令之後你的 source/_posts 下就會生成一個 article.md 文件,在這個文件下就可以寫上你的博客內容了。 直接新建方式直接點的方式就是直接在source/_posts新建一個 Markdown 文件,其實和命令形式是一個道理,只不過命令形式用了命令來創建。推薦使用命令的方式,畢竟 Geek 一點。給你的文章打上標籤

這時候你的 source/ 下生成 tags/index.md 文件,我們將其打開,然後把它改成:

type: "tags"
comments: false

這時候你要為你的文章打上標籤就可以在文章的頭部寫上:

tags:
- Tag1
- Tag2
- Tag3

tags:
- 個人網站
- 教程
- hexo
- blog
- Git
- Nginx

給你的文章添加分類分類,歸檔,是你博客的特性之一。把文章分門別類,方便查看。

同樣的,你的 source 目錄下生成 categories/index.md 文件,我們將其打開,把它改成:

type: "categories"
comments: false

這時候你就可以給你的文章歸類存檔了,使用方式就是在你的文章的頭部加上:

注意:標籤和分類要確定你的配置文件 _config.yml 是否有打開了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的語法是寫作最優雅最簡潔最簡單的,如果之前沒用過的建議去學一下Markdown 語法說明,一般一個鐘左右就能掌握。因為它和 HTML 那樣簡單。 給你的文章添加評論當別人看了你的文章,有問題想跟你探討,沒評論怎麼行?評論也是你的 Blog 交互的重要方式之一。現在很多 hexo 主題都內置了第三方評論的系統。比較常用的有:暢言 :https://changyan.kuaizhan.com/Valine:https://github.com/xcss/ValineDisqus:https://disqus.com/gitment: https://github.com/imsun/gitment自己去看一下,喜歡哪個用哪個,自己的 Blog 就是要自由。選好你的評論系統之後,進入平臺註冊後,平臺會給你一個 APPID 和 appkey。拿到這些信息到你的主題下的配置文件下設置。以 next 主題和暢言評論為例:進入你的themes/next,打開_config.yml,定位到 changyan ,把 enable 改為 true。

changyan:
enable: true
appid: 這裡寫上你的暢言在appid
appkey: 這裡寫上你的暢言在appkey

打開你的預覽連接看看你的文章下方,已經有評論功能啦。如下圖就是我博客的評論功能:

評論

讓全世界的人都認識你已經搞定了個人blog,接下來當然是要部署到網上讓人家訪問了,如果不想花錢,可以使用GitHub Pages,使用它就可以部署自己的網站啦。對於 GitHub 不知道怎麼用的童鞋,可以看一下我的這個教程:GitHub完全使用指南:https://vip.fxxkpython.com/?cat=6


創建 Github pages 倉庫接著創建一個 xxx.github.io 的 public 倉庫,這裡的xxx寫你的名字,比如我寫的是 wistbean.github.io,那麼到時我就可以通過 wistbean.github.io 來訪問我的網站了。

安裝 hexo-deployer-git在你的博客目錄下輸入如下命令,這樣你在本地寫的文章才能 push 到 GitHub 上面去。

npm install hexo-deployer-git --save

配置你的Git

deploy:
type: git
repo: https://github.com/xxx/xxxx.github.io.git

推送你的網站到Github上訪問你的網站這樣push上去之後,你就可以直接在瀏覽器輸入你的 xxx.github.io 就可以訪問啦!要有點個性,綁上你的域名如果你不喜歡千篇一律的 xx.github.io 域名,可以自己綁定一個自己的域名。購買域名
關於域名的購買我比較推薦去 dynadot 或者 godaddy,這是國外的域名商,可以使用支付寶購買,不需要備案,使用起來不錯的。綁定添加 CNAME 文件在你的博客的 sources 目錄下新建一個 CNAME 文件,這個文件裡面就寫你的域名就可以了,比如:www.xxxx.com。 接著將文件push到你的 GitHub上,可以使用 hexo d 命令。在你的域名商後臺進行 DNS 解析添加兩條記錄:

1. 主機記錄:@
記錄類型:A
記錄值:192.30.252.154 或者 192.30.252.153

2. 主機記錄:www
記錄類型:CNAME
記錄值:xxx.github.io (這裡就是你的github倉庫名稱)

GitHub 設置域名在你的 GitHub 設置域名,在你的 GitHub 博客項目中點擊 Settings,在 GitHub Pages 下的 Custom domain 寫上你的域名,然後 save。

至此,你已經搭建好了自己的博客,託管你的網站到 GitHub 了,也綁定了你自己的域名了,那麼這時候你的網站就可以被全世界的人看到了。ok,以上就是小帥b今天給你帶來的分享,希望對你有幫助,那麼我們下回見,peace!

相關焦點

  • 教你搭建 Github 個人博客網站
    Github 可以幫助我們構建 Jekyll 博客,只需要新建一個倉庫就可以。優點是免費,缺點是百度檢索困難。不過這一點影響也不大,可以另外使用 Gitee(國內版的 Github)。el7/webtatic-release.rpm        # 安裝Rubyyum -y install ruby(2)手動下載ruby最新版,本地安裝# 下載編譯.
  • 使用 GitHub Pages + Jekyll 免費搭建個人網站
    建立主站,而通過Project Pages掛載二級應用頁面。_includes:_includes/JB中有一些常用的工具,用於列表顯示、評論等;_includes/themes中可參看主題的相關html文檔。_includes/themes中的主題一般包含default.html、post.html和page.html三個文檔。
  • 使用hexo+github搭建免費個人博客詳細教程
    pages服務搭建博客的好處有:全是靜態文件,訪問速度快;免費方便,不用花一分錢就可以搭建一個自由的個人博客,不需要伺服器不需要後臺;可以隨意綁定自己的域名,不仔細看的話根本看不出來你的網站是基於github的;數據絕對安全,基於github的版本管理,想恢復到哪個歷史版本都行;博客內容可以輕鬆打包、轉移、發布到其它平臺;
  • Hexo+Github/Gitee 搭建個人博客
    個人博客的好處是你可以隨便折騰,沒有太多限制。搭建個人博客的框架有很多,比如wordpress、Hexo、Vuepress、Jekyll、Django等,Hexo博客簡潔高效,配置簡單,文章可以使用markdown語法編寫,下面介紹 hexo博客搭建步驟。
  • HuGo+Github-快速搭建個人博客
    受我司同期大佬的影響,我也便搭建個人博客折騰下,記錄點什麼~
  • 【從零開始】使用Hexo+github搭建免費個人博客教程(一)
    前兩天在b站看到一個百度的攻城獅老師的個人博客網站及簡歷,也想嘗試搭建個人博客,通過兩天的學習和摸索,終於有了一個雛形,教程總結一下發在這裡
  • github + hexo 小白超快搭建功能強大的個人博客網站(2)
    1. 更換主題2.下載主題next3. 修改Next為中文4. 博客個性化5. 新建標籤及分類標籤6. 更換主題的樣式7. 設置頭像8. 編輯側邊欄的社交連結9. 編寫博客10.博客個性化對博客進行簡單地定製化,找到Site ,配置網站一些基本信息,下面貼一下官網的基本配置:
  • github + hexo 小白超快搭建功能強大的個人博客網站(1)
    一些必備軟體1.1 github 帳戶1.2 下載nodejs2 按照Hexo1.一些必備軟體1.1 github 帳戶如果沒有到話,首先去github官網[1]去註冊一個帳戶(有的話,相信你懂這個網站,這部分你可以跳過)按部就班地填寫信息即可,用戶名別亂起,以後改起來麻煩,後面還要拿用戶名當域名,當然你們開心就好
  • 如何搭建個人博客網站
    常言道,與天爭,爭了個天道無常,與世爭,爭了個世事滄桑,與人爭,爭了個人心叵測,何不坦坦蕩蕩、瀟瀟灑灑的過活這一生呢。今天想分享如何搭建個人博客網站,程式設計師多多少少也該有一個自己的博客網站,一方面是為了記錄自己的工作總結,或是學習記錄,另一方面,一種寫作能力的積累能幫助你走的更遠。
  • 一篇學會搭建技術網站與個人博客
    它可是新的vue全家桶成員之一,尤雨溪大神於2018年4月12日推出。不信?請看Evan You github。star數已過萬,並不少。vuepress用於迅速搭建技術文檔網站與個人博客,簡單快捷,下面和我一起開始學習吧!(想直接coding的同學可從第三節開始)一、模塊概述1.
  • 5分鐘 搭建免費個人博客
    三步完成免費個人博客搭建, 這是一篇小白也能看懂的文章,本文主要針對OS X ,Windows 除了軟體安裝方式和命令有些區別(裝了git bash也一樣),其他基本一樣。你可能經常會看到類似於這樣的博客:
  • GitHub Pages + Hexo 快速搭建個人網站
    一、為什麼要搭建個人網站?我從 18 年 6 月份決定開始寫博客,在這半年時間中,為了找到了一個喜歡的寫作平臺,嘗試了各種網站,選來選去最後選擇了 CSDN ,總體來說是比較符合我的需求的。1、GitHub Pages大家都知道,GitHub 是各種開源及私有軟體項目的託管平臺,目前已經擁有超過千萬的開發者用戶,也是所謂的全球最大的同性戀交友網站(o(╯□╰)o)。同時,使用 GitHub Pages 可以把我們託管到 GitHub 上的靜態網站展示出來,而且還良心的給我們提供了一個免費的 HTTP 的 github 二級域名。
  • 用Github+Hexo搭建個人博客過程筆記
    我在學習用hexo+github搭建之前,對hexo、linux指令、iterm、atom、nvm、npm、node js等一無所知,搭建成功後,變為知之甚少,經歷了從0到1的重大突破。(記1小時,5:29早起)7.26號7:27,終於打通nvm install 4.4.5這一步。(記1小時,4:48早起)7.27號8:08,用hexo搭建博客,卡死在最後一步。(記2小時,4:29早起)晚上八點半開始又折騰搭建博客到九點半。(記1小時)7.28號繼續看教程,折騰,想解決最後一步的問題,大概到八點一刻。
  • 【新手向】從零開始搭建一個酷炫免費的個人博客
    由於公眾號的文章不易後續整理閱讀,於是小吳昨天上午花了半個小時使用 GitHub + Hexo 搭建了一下個人博客,打算將公眾號的文章搬過去,支持關鍵字搜索、分類標籤功能。效果是下面這樣子的👇結果後臺好多小夥伴挺好奇博客是怎麼搭建的,實際上這個挺簡單的,小吳就從零開始分享一波如何搭建一個酷炫免費的個人博客吧,如果已經有博客的小夥伴可以留言一波網站地址:)GitHub創建個人倉庫登錄到 GitHub ,如果沒有 GitHub 帳號,請使用你的郵箱註冊 GitHub 帳號:https://github.com/join?
  • GitHub免費搭建個人網站
    作為一個前端,擁有有自己的個人網站,算是邁出了前端道路的第一步!本文目的通過GitHub Pages免費快速的搭建個人網站,文章隨長,其實非常簡單,寫的詳細是為了能夠讓多數人都能夠看得懂建站常識首先了解常識,建站三部曲:簡單來說,就是我們要有一個域名,然後綁定伺服器,再把網站上傳到伺服器上,這樣就可以通過域名訪問我們的網站了網站項目就是你寫的網站文件
  • 從零開始搭建個人博客(一)- 使用hugo搭建個人博客
    背景使用個人博客也有一年多的時間,這一年多的時候踩了很多坑,也學到了很多知識。
  • 手把手教你使用Hexo + Github Pages搭建個人獨立博客
    目前我安裝所用的本地環境如下:(可以通過hexo -v查看)hexo: 3.2.0hexo-cli: 1.0.1os: Windows_NT 6.3.9600 win32 x64http_parser: 2.5.2node: 4.4.1v8: 4.5.103.35uv: 1.8.0zlib: 1.2.8ares: 1.10.1-DEVicu
  • 利用GitHub和Hexo打造免費的個人博客
    每個程序猿都需要一個個人博客,目前廣泛出現在大家視野裡的有CSDN、博客園、簡書,但是他們卻沒有給用戶一個專屬的站點、一個好記的域名。
  • 個人博客|第一章|手把手教你搭建、上線個人博客
    」前言Hello,我是淡漠,今天帶大家一起搭建個人博客。個人博客一直都是非常受歡迎的個人項目,個人博客分靜態和動態兩種,淡漠個人比較青睞靜態博客,靜態不需要管理後端,相比動態博客,靜態博客可以不需要花一分錢,開發成本要低一些,畢竟作為學生黨,買伺服器放一個博客網站有點浪費,也可以把精力集中於寫博客,而不是開發博客。
  • 利用Github搭建自己的個人博客,看完就會的保姆級教程
    (博客),今天辰哥來教大家如何利用Github來搭建一個自己的個人博客平臺。相信Github大家都有聽過,甚至是經常用,除了可以作為開源源碼的交流平臺,還提供了搭建博客的功能。目前一些大佬、老師的博客用的就是Github搭建的(辰哥見過很多)。訪問地址:https://liyunchen.github.io