• 基于 Hexo + GitHub Pages 搭建个人博客(二)


    基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和服务器,非常方便,无需我们费心。但是 Hexo 博客的原生主题并不符合大众的风格,那么如何为 Hexo 博客更换成我们喜欢的主题呢?下面这篇就来详细解答如何配置博客个人信息以及更换博客主题,以很多人都在使用的 NexT 主题为例。

    一、配置博客个人信息

    1、打开博客目录,如下图所示,打开 Hexo 全局配置文件 _config.yml

    2、在 Hexo 全局配置文件中,具体配置和如下,配置后面有详细注解说明:

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site 站点信息配置
    title: compassblog	#站点名
    subtitle: 刻苦学习,解决眼前的苟且,追寻诗和远方...	#站点副标题
    description: 微信公众号:compassblog	#站点信息简介
    author: 孔乙己		#站点作者
    language: zh-Hans	#站点语言,default 默认是英文,zh-Hans 是中文
    timezone: Asia/Shanghai		#时区
    avatar: /images/logo.jpg	#站点 logo
    
    # URL 博客地址
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://compassblog.github.io
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    
    # Directory 目录设置
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:
    
    # Writing 文章布局
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:
      
    # Home page setting 主页设置
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 3 	#每页文章数量
      order_by: -date
    
    # Category & Tag 分类和标签
    default_category: uncategorized
    category_map:
    tag_map:
    
    # 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: YYYY-MM-DD
    time_format: HH:mm:ss
    
    # Pagination 归档显示
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page
    
    # Extensions 扩展
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    
    # Deployment 站点部署到 GitHub 上,这里上一篇文章已经配置过
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: git@github.com:compassblog/compassblog.github.io.git
      branch: master
      message: hexo deploy
    

    友情提示:如果真的想搭建一个博客,建议要动起手来,一步一步,只有真正行动了,才会发现自己错在哪里,真的是这样。

    特别注意:配置 *.yml 文件有严格的格式要求,文件里所有的配置都是:冒号 空格 值,并且冒号是英文状态下的输入。而 *.yml 格式的文件是 Java 模板引擎 thymeleaf 文件,想了解的可以前往 官网

    3、到这里我们在博客目录右键点击 Git Bash命令,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,Hexo 博客的基本站点信息已经配置完毕

    hexo server
    

    注:如果想查看配置后的信息是怎样的,可前往我已经搭建好的博客 点击前往我的个人博客 查看,这里就不截图了。

    二、将 Hexo 博客主题更换为 NexT 主题

    1、下载 NexT 主题:下载解压,命名为 next ,放置到博客目录的 themes 文件夹下,如下图所示:

    2、修改 hexo 文件夹下的主配置文件 _config.yml ,将 theme 属性修改为 next ,修改代码代码如下,具体如图所示:

    # Extensions 扩展
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    

    3、到这里我们在博客目录右键点击 Git Bash命令打开窗口,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,Hexo 博客的主题已经变成了 NexT 主题。

    hexo server
    

    4、打开博客目录下的 themes 文件夹,进入我们刚刚配置的 next 文件夹,如下图所示,打开主题配置文件 _config.yml

    5、在主题文件中配置 Hexo 博客演示外观,如下所示:默认的 Hexo 样式是 Muse 原生样式,我这里选的是 Pesces 样式

    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------
    
    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini
    

    注:# 表示注释,要启用那个样式就直接把 # 去掉即可。想体验各种样式的不同之处,可以动起手来,亲自测试,本地预览。

    6、配置网站底部基本信息,具体配置代码如下:

    footer:
      # Specify the date when the site was setup.
      # If not defined, current year will be used.
      since: 2018	#网站起始运营年份
    
      # Icon between year and copyright info.
      icon: user	#声明图标
    
      # If not defined, will be used `author` from Hexo main config.
      copyright: 指南者工作室	#版权所有
      # -------------------------------------------------------------
      # Hexo link (Powered by Hexo).
      powered: false	#是否显示驱动
    
      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false	#是否显示主题
        # Version info of NexT after scheme info (vX.X.X).
        version: false
    

    7、配置菜单按钮,在主题配置文件中,找到 menu 属性,做如下配置:

    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------
    
    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
    # Value before `||` delimeter is the target link.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
    menu:
      home: / || home	#首页,后面的表示图标
      categories: /categories/ || th	#分类
      tags: /tags/ || tags		#标签
      archives: /archives/ || archive	#归档
      about: /about/ || user	#关于
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    

    8、到这里,网站基本信息的配置基本完成,但这时候本地测试时我们会发现,打开分类、标签、关于几个页面时会显示 404 错误,找不到页面,这是因为我们还没有创建相应的页面。在 Git Bash 窗口执行下面的命令,创建相应的页面即可,这时候我们会发现博客目录的 source 文件夹下已经生成了跳转页面的生成,如图所示:

    hexo new page 'categories'
    hexo new page 'tags'
    hexo new page 'about'
    

    9、每一个分类菜单都生成了一个 index.md 初始文件,默认包含了 title 和 date 字段,我们需要给每一 index.md 文件添加上 type 字段,如下图所示:

    10、配置搜索菜单:

    (1)安装 hexo-generator-searchdb ,在 Git Bash 窗口执行一下命令

    npm install hexo-generator-searchdb --save
    

    (2)打开全局配置文件,新增下面代码

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    

    (3)打开主题配置文件,找到 local_search 属性,开启本地搜索功能

    local_search:
      enable: true
      # if auto, trigger search by changing input
      # if manual, trigger search by pressing enter key or search button
      trigger: auto
      # show top n results per article, show all results by setting to -1
      top_n_per_article: 1
    

    11、到这里我们在 Git Bash窗口,执行以下命令,本地启动服务器预览博客,然后去浏览器地址栏访问就会发现,博客的主题更换和基本配置已经完成,如下图所示:

    三、在 Hexo 博客发布文章并托管到 GitHub Pages

    1、永远的 Hello Hexo :在 Git Bash 命令窗口执行下面的命令,新建一篇文章 "Hello Hexo",到博客目录的 /source/_posts/ 文件夹下可以发现,已经生成了标题为 Hello-Hexo.md 的博客文件,如图所示,我们直接编辑自己的文章即可。

    hexo new "Hello Hexo"
    

    特别提示:Hexo 发布的文章是 Markdown 格式的文件,如没使用过 Markdown 编辑器的同学,可以自行去学习一下 Markdown 语法,半小时基本可以掌握基本的语法了,推荐一个学习 Markdown 基本语法的网址: 点击前往

    2、给文章添加分类和标签:直接在所要编辑文章的头部添加如下代码即可

    ---
    title: Hello Hexo
    date: 2018-03-23 09:09:19
    tags: [Hexo]
    categories: [Hexo]
    ---
    

    注:多个分类和标签可以使用英文状态下的句号分隔。

    3、本地启动,浏览器测试预览文章,如图所示:

    4、添加阅读全文按钮:在文章的任意位置添加下面命令即可

    <!--more-->
    

    5、所要发表的文章在本地预览无误后,在 Git Bash 命令窗口执行以下命令,发布到 GitHub Pages 上

    hexo clean && hexo g && hexo d
    

    6、上传成功后,在浏览器地址栏直接访问自己的域名: 直接访问,即可看到自己编写的文章已经发布到了 GitHub 上。并且每次发布文章到 GitHub 都需要执行下面的流程:

    • Hexo clean
    • Hexo g
    • Hexo d

    扫描二维码关注微信公众号,了解更多

  • 相关阅读:
    Hibernate批量处理海量数据的方法
    策略模式
    SQL联合查询(内联、左联、右联、全联)的语法(转)
    git远程仓库
    datePiker弹出框被其他div遮挡
    RabbitMQ 主题(Topic)
    【计算机视觉】行为识别(action recognition)相关资料
    【计算机视觉】行为识别(action recognition)相关资料
    【计算机视觉】基于Shading Model(对光照变化一定不变性)的运动目标检测算法
    【计算机视觉】基于Shading Model(对光照变化一定不变性)的运动目标检测算法
  • 原文地址:https://www.cnblogs.com/compassblog/p/8629626.html
Copyright © 2020-2023  润新知