寫博客,VSCode+組合神器=效率

2021-12-30 程式設計師的技術圈子

大家好,我是圈子哥!

有幾天沒有跟大家分享了,五一我也出去浪了,這個五一真的是到處人山人海啊,與其說出去玩,不如說出去排隊,任何一個想去瞧一眼的景點都是爆滿,所以,我索性就不玩了,坐下來給大家分享一些東西。

今天想給大家分享我一直在用的寫博客組合神器,之前有文章寫過,我寫博客的時間其實已經很久了,我也有個人的博客,最開始寫博客其實我是在 CSDN,後來,也陸續在其他的平臺有做過一些分享,但是,想必大家也跟我一樣,都想擁有自己的個人博客,想把自己寫的博客發布到自己的博客上,這個想法其實是挺好的,但是,一般搭建自己的博客都是需要有一定的費用支出的,比如,買域名、伺服器等等,這些都是需要費用,如果是在校學生的話,也是一筆不小的開銷,想到這些可能很多人就猶豫了,到底還要不要搞呢,有沒有免費的博客,不要買伺服器的那種,然後部署起來也方便呢?

告訴你答案:有!沒有看這篇博客之前,可能你沒有解決方案,但是,經過這些年我的研究,我整理了一套自己的寫博客的方法,今天就分享給大家。

我的博客的組合方案是怎麼樣的呢?

答案是:VSCode+hexo+oss

0x01 搭建 hexo 個人博客

在說搭建 hexo 博客之前,先介紹一下為什麼選擇使用 hexo 博客。在使用 hexo 博客之前,我也用過 WordPress,但是,我發現他雖然功能豐富,社區也相對成熟,但是有個缺點就對伺服器的要求較高,我之前買的伺服器性能算不錯的,但是,搭建了 wp 之後,訪問速度還是不夠好,也不夠穩定。另外,在我使用的過程中,維護也是一個很大的問題,所以,對於個人的博客來說,hexo 是一個靜態的博客,生成靜態文件之後,直接部署即可,解決了 wp 的一些缺點,當然,不同的需求是不一樣的,如果你的博客的博文數量特別大,做了一個很大的網站,那我不推薦使用 hexo,因為當博客的數量很大之後,生成的速度會變慢,一個小時的那種,這種情況就看個人選擇了,如果你能接受,那也沒有問題,畢竟免費,當然,這種情況還是選擇 wp 比較好,多花錢,性能肯定是沒有問題的!

接下來,再來跟大家簡單的整理一下 hexo 博客的安裝過程,這個安裝過程包括安裝、更新、升級 hexo。

安裝 Git 和 Nodejs

這個兩個其實沒有什麼好說的,就是傻瓜式安裝了,給一下這兩個官網的地址。

Git:http://git-scm.com/downloadsNodejs:https://nodejs.org/download/搭建 hexo 環境

安裝了上面的 Nodejs 之後,就可以使用 npm 進行安裝了,下面是具體的安裝步驟。

npm install hexo-cli -g

npm install hexo-deployer-git --save

npm install hexo-generator-feed --save

npm install hexo-generator-index --save

npm install hexo-generator-archive --save

npm install hexo-generator-tag --save

npm install hexo-generator-category --save

npm install hexo-generator-sitemap --save

npm install hexo-generator-baidu-sitemap --save

以上就是搭建 hexo 博客的全過程了,以後你可能還會遇到一個問題,考慮到 hexo 版本可能會更新,因此,也需要對個人博客進行更新,更新的操作如下。

//以下命令分別執行即可
npm install -g npm-check     //安裝npm-check
npm-check                    //查看系統插件是否需要升級
npm install -g npm-upgrade   //安裝npm-upgrade
npm-upgrade        //更新package.json
//在執行npm-upgrade命令後會要求輸入yes或者no,直接輸入Yes或Y即可
npm update -g      //更新全局插件
npm update --save  //更新系統插件

hexo 博客配置

hexo 博客的配置其實不需要從零開始,一般,我們都是採用從一個基本的主題開始,比如,我們選用 hexo-theme-next[https://github.com/iissnan/hexo-theme-next]作為我們的主題框架,我們從上面的 github 上 clone 下來,然後再進行配置即可。

以上就是兩個最重要的配置文件,一個是整個站點的配置文件,一個是針對博客主題的配置文件,更詳細的配置方法網上有很多的教程,這裡就不多介紹了。

配置好了之後,就可以看到整個博客的全貌了,例如我的博客:好好學 java[blog.ouyangsihai.cn]。

0x02 VSCode 寫博客

我們都知道,現在寫博客基本上都是使用 markdown 的格式,而 hexo 博客也是採用這種格式,這就會出現一個問題,hexo 博客由於沒有後臺管理系統,沒有統一管理博客,這是比較麻煩的,在最開始的時候,我也嘗試過很多種方式,比如,採用 hexo-admin 等,但是,這種方式都不穩定,管理起來還是很麻煩,後來,我使用 VSCode 發現了有 hexo 的插件,對 hexo 的博客可以分類管理,使用起來也比較方便,寫博客也得心應手。

在 VSCode 中,我使用的插件是 vscode-hexo-utils,這款插件,安裝之後,就會對整個 hexo 博客進行類別、標籤和草稿整理。

通常,在 DRAFT 進行草稿編寫,博客編寫好之後,就可以加入到 POST 中,然後進行發布。

在寫博客的過程中,可能還是會遇到一個問題,就是圖片怎麼處理,怎麼上傳?

針對這個問題,這款插件也提供了解決方案,只需要在設置中將 upload 選中,就可以上傳圖片。

而我的解決方案是採用七牛雲對圖片進行對象存儲,這樣的話,好處就是可以自己管理自己的圖片,也是分離的。

到目前為止,搭建 hexo 博客、管理 hexo 博客和編寫博客都解決了,就只剩下最後一個問題了,如何部署 hexo 博客。

0x03 部署 hexo 博客

部署博客是搭建個人博客最重要的一個環節,是否花錢也在這個步驟,起初,我使用 github 作為倉庫進行部署,這種方式雖然免費,但是問題在於不穩定,訪問的速度很慢,我使用了一段時間之後,放棄了!

其次,放棄了 github 之後,我選用了很多人使用的 Coding 作為部署的倉庫,使用了一段時間感覺還好,穩定性還可以,最後又發現,還是不穩定,打開速度還是沒有辦法保證。

再次,我再度嘗試,選擇用了 gitee 的靜態博客服務,有免費的服務,但是很雞肋,放棄了,後面發現有付費服務,一年好像 98,也不是很貴,但是,也不好用,一段時間出現了樣式不顯示的問題,徹底讓我死心了。

最後,就在我快要放棄 hexo 的時候,我發現了 oss 對象存儲,於是選用了阿里的對象存儲功能,雖然需要付費,但是費用還是很少的。

具體的步驟很簡單,如果大家需要的話,可以看一下這篇文章:https://blog.csdn.net/java_zdc/article/details/109089484,這篇文章,我重點講一下,部署的工具和插件,來兼容的我的配套。

在使用阿里雲的 oss 服務時,他提供了文件上傳的工具。

下載對應的工具,接下來只需要我們在本地進行博客生成即可,也就是:hexo clean -> hexo g -> hexo d。

然後,選中public中生成的靜態文件上傳即可。

另外,hexo 也有大佬提供了 oss 的插件,在hexo d的時候自動上傳文件。可以使用hexo-deployer-aliyun或hexo-deployer-cos-cdn進行部署,超級方便簡捷,具體的使用步驟在這兩個插件中都有介紹,這裡不再重複。

0x04 小結

至此,完成了搭建個人博客的全部過程,建站->配置->編寫博客方案->部署,以上就是我這些年實踐下來的經驗,可能不是最佳方案,但是至少是我目前一直在使用的方案,如果你覺得有用,可以嘗試一下,當然,個人博客只是一種形式,最重要的還是內容的產出!

相關焦點

  • 提高 VSCode 寫代碼效率的技巧
    ,它的功能很多,但其實我們有很多功能都沒用到,這篇文章就是想梳理下那些可能你不知道的但是卻對效率提高很有幫助的一些技巧。那是你沒用過 vscode 自帶的這個功能。vscode 會掃描所有的 npm scripts,然後列出來,直接點擊 run 就會打開 terminal 來跑,而且高版本 vscode 還可以直接 debug 來跑。根本不需要自己輸入 npm run xxx。在側欄打開文件當打開文件的時候,默認會在當前編輯器打開,如果想新開一個編輯器打開呢?
  • vscode實用插件推薦
    1 One Dark Pro2 Material Icon Theme很多編輯器的優勢都是強大的插件支持,vscode自然也不例外,插件可能會佔用一些資源,減慢IDE的啟動速度,但是適當使用一些效率插件,對於提高效率還是很有助益的。
  • 24 款神級插件,讓你的 vscode 更牛逼!
    大家好,我是小編火寶~之前的文章經常會提到 vscode,有小夥伴反饋說 vscode 雖然挺好用,但是插件太多了,不知道要安裝哪些。亂裝一通不但效果不好,甚至還會導致每次打開vscode都要吃掉不少內存,非常得慢。
  • vscode入門:熟悉vscode和初級配置
    提高效率需要藉助於合適的工具,更需要自己熟練使用,積累久了便可自成體系風格。登錄vscode官網,下載對應平臺的安裝包安裝即可,下載安裝的過程中可以了解一下release notes,看看官方文檔。默認是英文界面,可以修改成中文(初期為了熟悉工具,最好使用熟悉的語言,英語大神可以跳過這一步)。點擊界面左下角的設置按鈕,選擇最上面的Command Palette...
  • 使用代碼片段的正確姿勢,打造高效的vscode開發環境
    這個地址很長一段時間都不會變,包括這個配置的結構等主要內容其實都不太會變,每次要寫的時候都會忘記,在找了好一會之前寫的代碼後,終於找到了之前的配置文件,複製-粘貼我的vue項目中會使用vuetify,而vuetify的各種配置都會寫在一起,說複雜也不複雜,但我沒有記,每次都是用到的時候打開官網然後,複製-粘貼還有一些其他配置文件,例如 axios,echart,signalr
  • 多虧了這幾款軟體,我才能堅持寫博客這麼多年!
    寫博客大致可以分為三步:按照這三步介紹這個過程中我用到一些工具。image-20200328143839226另外 carbon 還有 IDEA,vscode 等插件,安裝之後,可以快速使用。其他博客平臺目前個人還會把文章分發到掘金,博客園,segmentfault 等,這些平臺都支持 markdown,可以直接將 markdown 直接複製過去。不過分發平臺較多,一個個發還是比較麻煩。
  • 強力推薦提高開發效率 VSCode 的插件!
    現在大部分做前端開發,基本都在使用 vscode 吧;這裡推薦一下我常用的提高工作效率的插件。主題1.
  • 一分鐘將 vscode 擼成街機小霸,摸魚神器!
    今天給大家分享一下自己最近擼的一款vscode遊戲插件,基於vscode的休閒放鬆利器。
  • 眾所周知,擁有了vscode就擁有了一切
    vscode是由微軟推出的一款的編輯器,免費開源且功能強大,自從用上之後,基本上不會再使用其他的編輯器,在我看來它幾乎可以用來幹任何事情。常規用法vscode 寫代碼支持各種流行的程式語言,包括c++, Java, js等等。通過相應的插件你甚至能夠對它們進行編澤運行。
  • 效率神器工具,看這篇就夠了!
    :https://xclient.info/麥氪派 (前愛情守望者):https://www.waitsun.com/topics/os二、必備工具篇■不得不下的效率神器 Alfred■切換應用的神器:Manico
  • vscode寫Python數據處理分析代碼,由安裝配置到cell交互模式
    因此我決定寫幾篇 Python 數據處理分析必備的入門知識系列文章,以幫助有需要的小夥伴們更好入門。系列相關文章: Python玩數據入門必備系列:環境安裝前言上一節我們已經安裝了 Python ,但是我們不希望直接在黑烏烏的命令窗口或白茫茫的記事本中寫代碼,本文主要介紹 vs code 的安裝、配置以及 cell 交互模式安裝 vs code首先,一樣使用以下搜尋引擎:搜索關鍵字 "vscode"點擊第一個搜索結果的
  • 12 個我最喜歡的 VSCode 擴展
    VSCode之所以能成為如此出色的代碼編輯器,其原因之一是由社區創建的龐大的擴展庫,可以大大提高開發人員的工作效率。以下是一些我最喜歡的VSCode擴展。1. Rainbow Brackets這個簡單的擴展可以使代碼裡括號的顏色變得豐富多彩,以便我們輕鬆找到匹配對。
  • 「年度巨獻 重磅出擊」不可錯過的寫論文神器,效率暴增1000%
    考研便利店為大家帶來【年度巨獻 重磅出擊】絕對不可錯過的寫論文神器,效率暴增1000%【年度巨獻 重磅出擊】絕對不可錯過的寫報告神器,效率暴增1000%重要的話說三遍:軟體詳情及使用方法點擊下列標題即可【降重神器】自動降重小助手(不只論文可用,文字性作業均可用此軟體「偷雞」)
  • 用VScode寫一個OutLook監控腳本
    我們在要查看的地方打一個斷點,然後點擊左邊三角圖標,最後選擇「Python File」。這裡只是簡單的和大家介紹了一下,如果想了解更多vscode的內容,歡迎大家關注我們。
  • vscode插件體系詳解
    事實上很多 vscode 的核心功能也是通過插件實現的。本文我們將從以下三個方面詳述 vscode 的插件機制:閱讀本文後續內容,需要對 vscode 的插件開發有基本的了解。關於 vscode 的插件開發可參考 vscode 的官方教程 。1.
  • 那些你應該考慮卸載的 VSCode 擴展
    這篇文章可能會得罪一部分 VSCode 擴展的作者,但是我實在是看不慣網上很多的文章還在推薦一些已經過時的擴展,我覺得作為 VSCode 的老粉,我有必要寫一篇文章科普一下。其實 VSCode 自身已經支持在 import/require 也就是導入語句中使用路徑補全,但是在其它場景中寫路徑字符串時還是沒有提示。如果你覺得在導入語句中有路徑補全已經能夠滿足你的使用需求,那我覺得這個插件可以考慮卸載了。類似的還有 Path Autocomplete。
  • 大語文時代,讓孩子用手機寫博客,越寫語文成績越好
    對於學生也是如此,使用手機得當,會大大提高學習效率、拓寬學習視野,提升孩子的素質。今天我們來說說使用手機寫博客,提高語文成績。大家知道,從小學三年級開始,作文就開始粉墨登場了。而隨著近年大語文時代的逐步到來,作文,作為語文的重頭戲,更是彰顯出十分重要的地位。2019年秋季開始,小學1-6年級語文課本統一改為使用教育部統編版,一改原來的各個版本分散的局面。
  • 我最喜歡的 12 個VSCode 插件!
    VSCode 之所以是如此出色的代碼編輯器,其原因之一是由社區創建的龐大的插件庫,從而提高了開發人員的工作效率。以下是一些我最喜歡的VSCode 插件。1. Rainbow Brackets地址:https://marketplace.visualstudio.com/items?
  • 超另類:在vscode下實現編譯仿真下載,你絕對想不到
    生命在於運動,技術在於折騰,你是否厭倦了在keil、iar下孜孜不倦的寫代碼、debug,是否玩累了在外部編輯器下寫代碼,然後在轉到ide下進行仿真、下載等操作呢?這個教程將介紹下如何在vscode下實現這些操作,真正實現一個vscode可以吃天、實現編譯仿真下載一條龍服務,而你只需要在vscode下的終端敲幾個命令而已。。。
  • 2020 vscode 好用的十佳擴展
    vscode作為免費開源的文本編輯器,它已經越來越受開發者喜愛。因為豐富的插件,它可以媲美IDE,同時它還有著不俗的啟動速度,可以說它是一款披著文本編輯器的IDE一點也不為過。vscode有著無數的插件,今天我們就來盤點一下2020年vscode相對來說非常好用的十佳擴展。Import Cost在開發過程中,我們可能經常會發現自己在項目中添加了依賴項。儘管模塊化開發已成為當今軟體開發的關鍵部分,但最好還是確保對依賴的過度依賴。