使用Github.io打造个人博客网站

怼烎@ 2023-07-10 15:40 148阅读 0赞

Github.io上可以方便地打造自己的博客网站，相对于CSDN等社区网站来说既没有广告又能凸显个人调性。

# 建站步骤 #

--------------------

建站步骤非常简单

1.  在个人github上建一个repository，名字必须是`username.github.io`  
    ![20200303160128483.png][]
2.  推送一个静态html上去

# clone the prj
    git clone https://github.com/username/username.github.io
    
    # Hello World
    cd username.github.io
    echo “Hello World” > index.html
    
    # Push it
    git add –all
    git commit -m “Initial commit”
    git push -u origin master

1.  通过`https://username.github.io.`就可以访问网页了。

# 页面优化 #

--------------------

Github.io只能静态网页浏览服务，无法通过运行后端代码提供动态功能，所以只能用于博客之类的简单网站，但是我们依然有优化空间，通过优化静态的html页面让网站更漂亮。

github推荐[Jekyll][]这个静态网站构建工具：

> Transform your plain text into static websites and blogs.  
> – Jekyll的Slogan

Jekyll官网的安装需求

>  *  Ruby version 2.4.0 or above, including all development headers (ruby version can be checked by running ruby -v)
>  *  RubyGems (which you can check by running gem -v)
>  *  GCC and Make (in case your system doesn’t have them installed, which you can check by running gcc -v,g++ -v and make -v in your system’s  
>     command line interface)

我使用呢win10配置了Ruby环境并进行了Jekyll安装：  
参考：[https://jekyllrb.com/docs/installation/windows/][https_jekyllrb.com_docs_installation_windows]

### 1. 安装Ruby ###

[Ruby官网][Ruby] 下载Ruby+Devkit 2.6.5-1

### 2. 安装Jekyll与Bundler ###

gem install jekyll bundler

### 3. 使用Jekyll建站 ###

$ bundle exec jekyll new mysite --force
    $ cd mysite
    $ bundle exec jekyll serve
    Configuration file: C:/Users/~~/documents/github/~~/mysite/_config.yml
                Source: C:/Users/~~/documents/github/~~/mysite
           Destination: C:/Users/~~/documents/github/~~/mysite/_site
     Incremental build: disabled. Enable with --incremental
          Generating...
           Jekyll Feed: Generating feed for posts
                        done in 2.626 seconds.
     Auto-regeneration: enabled for 'C:/Users/~~/documents/github/~~/mysite'
        Server address: http://127.0.0.1:4000/
      Server running... press ctrl-c to stop.

建站成功，通过`http://localhost:4000/`可以看到以下页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

# Jekyll目录结构 #

--------------------

建站后的目录结构简单说明一下：  
![20200303163328588.png][]

*  \_posts：博客站默认以markdown的形式投稿，这处理存放投稿的md文件
 *  \_config.yml：可以对页面的Theme或者Footer等的进行配置
 *  about.markdown：页面的about部分
 *  Gemfile：使用bundler创建的Gemfile

# 最后 #

--------------------

更多详细内容 参考 [https://github.com/jekyll/minima][https_github.com_jekyll_minima]

[20200303160128483.png]: https://img-blog.csdnimg.cn/20200303160128483.png
[Jekyll]: https://jekyllrb.com/
[https_jekyllrb.com_docs_installation_windows]: https://jekyllrb.com/docs/installation/windows/
[Ruby]: https://rubyinstaller.org/downloads/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303163057380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200303163328588.png]: https://img-blog.csdnimg.cn/20200303163328588.png
[https_github.com_jekyll_minima]: https://github.com/jekyll/minima