版權聲明：本文為徐代龍原創文章，未經徐代龍允許不得轉載。 https://blog.csdn.net/xudailong_blog/article/details/78762262

---

敲黑板：如何寫一個自己的小程序并上線

##（一）前言：

建議：慢慢看,也就這一篇用心了點寫

說來話長，一把辛酸淚，可算是弄好了。

1 起因：在很早很早，大一的時候，估計快記不得日子了，那時候來到PC吧創業團隊，一個大一級的學長通過買源碼創建了一個社區論壇，因為那時候的社區比較流行，學長讓我們注冊個賬號，發個心情，然后加個積分，再升個等級，常來逛逛，呵呵，好滿足的感覺。從那以后，我就想著是否有一天我也可以做出讓身邊的小伙伴都來觀摩一下我的網站。

---

2 沒想到的是，這一想就想了9年之久，一干就干了快十年，這次終于可以很難勉勉強強的對學長們說：諾，歡迎來到我的博客小屋，如果你想了解我，那么請你翻到底吧，（kidding.gif）

逗比的話，就那么點，生活中的我也是很逗比，但是更是一個愛學向上的騷年，悶騷而不失態。

---

好吧，我要開始干活了。

我的各大blog：

國外的Github地址：
GitHub

國內的GitHub地址：
碼云

我的單純網站：
http://xudailong.cc/

可能你們會想，寫個博客就寫個博客唄，為什么還裝這么低級的A，弄三個出來，老實回答你們吧，我?我也不想啊，

我怕哪一天3.我的單純網站 掛了，因為3是用的阿里云買的域名，花錢的額，要是哪天我沒錢了，或者域名解析出錯， 那不就掛了嘛，畢竟我已經掛掉一個域名了，現在還沒修好，我才用了一個禮拜沒出頭啊，蛋蛋的憂傷。

1.國外的GIthub地址，現在是因為天朝，訪問速度可能更不上，可能網絡訪問速度慢些，但是，我依舊是很喜歡Github的，畢竟我感覺，里面有很多Object讓我happy，所以Github這個就不算是備胎，真正的備胎是:

2.國內的Github地址：碼云 ，此碼云非彼馬云， 把它當做備胎無非就一點，國內服務器，訪問網絡速度快一些，其他的，我也不知道，第一次知道。

現在上幾張成果圖，呵呵，使用的輪子真高(滑稽.gif):

（二） 關于我的博客

（1）Home頁：

（2） 分類與標簽頁：

（3）單個文章的編輯日期，作者，分類，標簽，查看更多

（4）頂部Tab欄

（5）底部分頁，訪客量統計，回到頂部按鈕

（6）博客詳情頁

以上就是整個博客的頁面，其實這個博客也是后來發現的，一位比較低調的阿里前端哥哥擼出來的，且一直在維護中的Blog。

##（三） 其他博客類型

類型一：

類型二：

類型三：

類型四：

類型五：

暫且就這么多吧，類型一是現在大多數ITer 常用的個人博客類型，Hexo強力驅動，雖然我到現在也不知道Hexo跟Jekyll有什么不同的區別
##（四）搭建博客辛酸shift

前面的坑

能成功搭建成這篇博客是根據類型三：柏熒的博客進行搭建的，但是又不是很喜歡那樣的界面，畢竟我這對前端能懂個屁的味道就很不錯了，于是在博客三的基礎上進行進行博客五的Fork歷程，

可誰知道博客五上傳的代碼不全，提供的搭建博客教程卻沒有，一臉懵逼臉，在這里我能說博客五是在博客四的基礎上進行個性化設置的嗎？博客四是位鵝哥哥，博客五我現在看來，實現的功能應該不算多，可能是多了個網易音樂播放的位置吧，

當時硬是不想使用柏熒的博客，對TGOYO的博客有感覺些，于是，找啊找，找到了浩陽貓哥哥的博客，離我也就5Km不到的廠子里面工作的路人。

于是：我索性跟著博客Fork下來進行個人博客的修改

路上的風景

注冊一個Github賬號 or 碼云賬號

Github官網

Fork（拉取）我的博客模板
在Github上搜索：xudailong.github.io 進入到我的倉庫中

可能你已經進入到了這個頁面，那么接下來我們要進行的操作。

點擊紅色的Fork后，就可以變成我們自己的倉庫了。

Fork成功后，就成我們自己的名下了，這時候，我們需要進行博客的簡單設置。

找到Settings點擊，進行頁面的設置。

這里我們找到Rename下的前面的框內的內容，我們要改成與我們自己的github一樣的；用戶名，這里我已經改過了，一定要記得用戶名與倉庫名要一致，就是兩處畫紅線的地方。

當rename完后，我們在當前頁面往下拉，直到出現GitHub Pages：

這里有一句話：

Your site is published at https://643435675.github.io/

好了，現在就能正常的訪問剛剛我們Fork過來的頁面，此時你的博客地址應該是：xxx.github.io
xxx 是你的Github用戶名*

當你在瀏覽器的新窗口輸入：xxx.github.io
此時能就能訪問到你的博客了，但是你的博客里面依舊顯示是我的博客內容，所以，接下來，我們進行博客的修改。

（五） 將博客修改成自己的博客

（1）先說個概念，現在的github個人搭建博客方式有兩種，

一種是：
GitHub Pages + Hexo 的方式
另外一種是：
GitHub Pages + jekyll 的方式

我采用的搭建博客的方式是第二種：
使用GitHub Pages +jekyll的方式。

我們現在用Git工具將整個項目Git clone下來，可以看一下現在的目錄結構：

這里進行一下各個文件（夾）的用途

• _config.yml ：全局配置文件
• posts :放文章的文件夾

其他的文件夾是各頁面的HTML文件，你可以點進去看看，嘗試改變一下

其中：_config.yml 文件中：

# Welcome to Jekyll! # # This config file is meant for settings that affect your whole blog, values # which you are expected to set up once and rarely need to edit after that. # For technical reasons, this file is *NOT* reloaded automatically when you use # 'jekyll serve'. If you change this file, please restart the server process.# Site settings title: 徐代龍的技術專欄 brief-intro: Android and Python Coder baseurl: "" # the subpath of your site, e.g. /blog url: "https://643435675.github.io" # the base hostname & protocol for your sitepermalink: /:year/:month/:day/:title/# other links twitter_username: #gaohaoyang126 facebook_username: #gaohaoyang.water github_username: 643435675 email: 643435675@QQ.com weibo_username: 3115521wh zhihu_username: hll643435675 linkedIn_username: gaohaoyang dribbble_username:description_footer: 來自徐代龍的個人專欄！# comments # two ways to comment, only choose one, and use your own short name # 兩種評論插件，選一個就好了，使用自己的 short_name duoshuo_shortname: #hygblog disqus_shortname: #gaohaoyang# statistic analysis 統計代碼 # 百度統計 id，將統計代碼替換為自己的百度統計id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009 google_analytics_id: UA-72449510-4 # google 分析追蹤id# Build settings markdown: kramdownkramdown:input: GFMsyntax_highlighter: rouge# port # port: 1234# url category_dir: category/ tag_dir: tag/# excerpt excerpt_separator: "\n\n\n\n"# paginate plugins: [jekyll-paginate] paginate: 6 port: 4001

你可以一邊修改一邊進行調試，

# paginate plugins: [jekyll-paginate] paginate: 6 port: 4001

paginate中paginate的6為每頁顯示6篇文章，port：4001 是jekyll啟動端口號，

# statistic analysis 統計代碼 # 百度統計 id，將統計代碼替換為自己的百度統計id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009 google_analytics_id: UA-72449510-4 # google 分析追蹤id

這里進行了百度統計與谷歌統計，只要替換一下統計id就可以成為你自己的id了。

（2）使用Jekyll修改靜態博客

請詳細跟這篇教程走:
Jekyll 搭建靜態博客

請務必走完，因為上面這博客講的很清楚，很詳細，環境搭建好，剩下的就簡單了。

我再簡明一下步驟：
一 ：安裝Ruby
二 ：安裝RubyGems
三：用RubyGems安裝Jekyll
四：cd到博客文件夾，開啟服務器
五：訪問 http://localhost:4000/
六：提交代碼到遠程GitHub上

我按照上面的教程走完，大概步驟是這樣子的：

spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ gem install jekyll Successfully installed jekyll-3.6.2 Parsing documentation for jekyll-3.6.2 Done installing documentation for jekyll after 2 seconds 1 gem installedspencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ jekyll s Configuration file: F:/myself/643435675.github.io/_config.ymlSource: F:/myself/643435675.github.ioDestination: F:/myself/643435675.github.io/_siteIncremental build: disabled. Enable with --incrementalGenerating...done in 5.499 seconds.Please add the following to your Gemfile to avoid polling for changes:gem 'wdm', '>= 0.1.0' if Gem.win_platform?Auto-regeneration: enabled for 'F:/myself/643435675.github.io'Server address: http://127.0.0.1:4001/Server running... press ctrl-c to stop.spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ jekyll serve Configuration file: F:/myself/643435675.github.io/_config.ymlSource: F:/myself/643435675.github.ioDestination: F:/myself/643435675.github.io/_siteIncremental build: disabled. Enable with --incrementalGenerating...done in 2.859 seconds.Please add the following to your Gemfile to avoid polling for changes:gem 'wdm', '>= 0.1.0' if Gem.win_platform?Auto-regeneration: enabled for 'F:/myself/643435675.github.io'Server address: http://127.0.0.1:4001/Server running... press ctrl-c to stop.

最后是提交到github上面：
可以參照這一篇文章：
git 提交代碼到github上

博客搭建參考：
（一）浩陽神：https://gaohaoyang.github.io/（特別感謝浩陽哥哥，雖然你離我只有五公里遠）
（二）Devin喲神：http://www.jianshu.com/p/f389ad8c49bd
（三）BYQiu神:http://www.jianshu.com/p/e68fba58f75c

最后博客就這樣子搭建完了，至于域名解析的話，還有把博客搭建在碼云上，這里可以自己去摸索。

（3）域名解析的情況：

（三）BYQiu神:http://www.jianshu.com/p/e68fba58f75c
這篇只是說對了部分，理應域名解析是不把值直接用github的服務器地址值進行設置的，因為我這里面試過了，他有可能會變，在公司跟在自己的電腦ping的是不一樣的地址，有的情況可能會遇到域名解析失敗的情況，這里一定要先實名認證了，然后再做其他操作才不會出現域名解析失敗的情況 ，當然你可以看一下這篇文章，可能會稍微懂一些：
注冊局設置暫停解析（serverHold）

下面就寫完了，這對于很小白的我都可以做出來，如果你想弄一個的話，你覺著你行不行呢？

（o(￣︶￣)o）

ad time

歡迎關注「蛇崽網盤教程資源」公眾號 ，在微信后臺回復「領取資源」，獲取IT資源200G干貨大全。

在微信后臺回復「130個小程序」，即可免費領取享有導入就能跑的微信小程序

在微信后臺回復「Flutter移動電商」，即可免費領取Flutter移動電商系列全套

總結

以上是生活随笔為你收集整理的Github搭建个人博客（2019最新版,亲测）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。