配置你的 github pages

原理

• github 能夠生成靜態網頁
• 每一個用戶都會自動分配一個域名：username.github.io
• 域名與github上的項目(registory)的關係
  • 域名：username.github.io
    • 訪問項目 username.github.io 的 master 分支的/index.html 文件
  • 域名：username.github.io/folder(自定義)
    • 若是項目username.github.io有folder文件夾，則優先訪問項目 username.github.io的master分支下的/folder/index.html，若是沒有訪問到的，顯示爲404頁面
    • 若是項目username.github.io沒有folder文件夾，則訪問獨立項目 folder(自定義) 的 gh-pages(必須是)分支 的 /folder/index.html 文件
• index.html的格式
  • 能夠是正常格式的 html 文件
  • 能夠是 jekyll模板引擎規定的格式文件，github會將此格式的源文件解析爲靜態頁面
• github使用 jekyll 模板引擎處理你github分支上的源文件，生成可訪問到靜態頁面。所以，你項目分支上的源文件是要符合jekyll的語法規則，才能夠以靜態頁面的形式訪問

工具

寫jekyll格式的源文件比較複雜，這裏介紹hexo來生成jekyll格式文件的方法

搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門

hexo 使用方法

• 使用工具
  • git bash
  • nodejs
• 安裝 hexo
  • npm install -g hexo
• 建立 hexo 文件夾
  • hexo init
• 安裝依賴包
  • npm install
• 本地測試
  • hexo generator
  • hexo server
• github 建立 repository
  • liuyuanyangscript.github.io
• 部署

  • 編輯_config.yml(在\hexo下)

    deploy:
    type: git
    repository: https://github.com/yourname/yourname.github.io.git
    branch: master

  • 完成部署

    hexo generate（編譯，每次修改文件後都要編譯）
    hexo deploy（提交到 github）

• 簡單的命令格式

  hexo g == hexo generate
  hexo d == hexo deploy
  hexo s == hexo server
  hexo n == hexo new

• 本地測試

  • 命令

    hexo server

  • 本地訪問

    localhost:4000

• 博客配置

  • 對站點的配置 \hexo\_config.yml

    # Hexo Configuration
    ## Docs: http://zespia.tw/hexo/docs/configure.html
    ## Source: https://github.com/tommy351/hexo/
    
    # Site 這裏的配置，哪項配置反映在哪裏，能夠參考個人博客
    title: Zippera's blog #站點名，站點左上角
    subtitle: Walk steps step by step #副標題，站點左上角
    description: Walk steps step by step #給搜索引擎看的，對站點的描述，能夠自定義
    author: zippera #在站點左下角能夠看到
    email: #你的聯繫郵箱
    language: zh-CN #中國人嘛，用中文
    
    # URL #這項暫不配置，綁定域名後，欲建立sitemap.xml須要配置該項
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://zipperary.com
    root: /
    permalink: :year/:month/:day/:title/
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    
    # Writing 文章佈局、寫做格式的定義，不修改
    new_post_name: :title.md # File name of new posts
    default_layout: post
    auto_spacing: false # Add spaces between asian characters and western characters
    titlecase: false # Transform title into titlecase
    max_open_file: 100
    filename_case: 0
    highlight:
      enable: true
      backtick_code_block: true
      line_number: true
      tab_replace:
    
    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    
    # Archives 默認值爲2，這裏都修改成1，相應頁面就只會列出標題，而非全文
    ## 2: Enable pagination
    ## 1: Disable pagination
    ## 0: Fully Disable
    archive: 1
    category: 1
    tag: 1
    
    # Server 不修改
    ## Hexo uses Connect as a server
    ## You can customize the logger format as defined in
    ## http://www.senchalabs.org/connect/logger.html
    port: 4000
    logger: false
    logger_format:
    
    # Date / Time format 日期格式，不修改
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: MMM D YYYY
    time_format: H:mm:ss
    
    # Pagination 每頁顯示文章數，能夠自定義，我將10改爲了5
    ## Set per_page to 0 to disable pagination
    per_page: 5
    pagination_dir: page
    
    # Disqus Disqus插件，咱們會替換成「多說」，不修改
    disqus_shortname:
    
    # Extensions 這裏配置站點所用主題和插件，暫默認，後面會介紹怎麼修改
    ## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
    ## Themes: https://github.com/tommy351/hexo/wiki/Themes
    theme: light
    exclude_generator:
    plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
    
    # Deployment 站點部署到github要配置，上一節中已經講過
    ## Docs: http://zespia.tw/hexo/docs/deploy.html
    deploy:
      type: github
      repository: https://github.com/zippera/zippera.github.io.git
      branch: master

  • 對主題的配置 \hexo\themes\light_config.yml (light 是主題名字，可變)

    略

• 複製別人的主題

  舉例：git clone https://github.com/wuchong/jacman.git themes/jacman

• 啓用主題

  根目錄下的_config.yml的theme屬性，設置爲：theme: jacman(例)

• 更新主題

  舉例：cd themes/jacman + git pull

  爲避免出錯，先備份_config.yml文件後再升級

• 發表文章

  • 命令

    hexo new "my new post"

    生成 markdown 文件

  • 生成的 markdown 文件的默認格式

    title: my new post #能夠改爲中文的，如「新文章」
    date: 2013-05-29 07:56:29 #發表日期，通常不改動
    categories: blog #文章文類
    tags: [博客，文章] #文章標籤，多於一項時用這種格式
    ---
    markdown 格式的正文

  • 編譯

    hexo generate

  • 本地訪問

    hexo server

  • 提交到 github

    hexo deploy

• 安裝插件

  添加sitemap和feed插件

  $ npm install hexo-generator-sitemap
  $ npm install hexo-generator-feed

  修改_config.yml，增長如下內容

  # Extensions
  Plugins:
  - hexo-generator-feed
  - hexo-generator-sitemap
  
  #Feed Atom
  feed:
    type: atom
    path: atom.xml
    limit: 20
  
  #sitemap
  sitemap:
    path: sitemap.xml