配置你的 github pages

干亮
2023-12-01

原理

  • github 可以生成静态网页
  • 每个用户都会自动分配一个域名:username.github.io
  • 域名与github上的项目(registory)的关系
    • 域名:username.github.io
      • 访问项目 username.github.iomaster 分支的/index.html 文件
    • 域名:username.github.io/folder(自定义)
      • 如果项目username.github.iofolder文件夹,则优先访问项目 username.github.iomaster分支下的/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.ymltheme属性,设置为: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

转载于:https://www.cnblogs.com/yiyang/p/4525572.html

 类似资料: