zoukankan      html  css  js  c++  java

  • Github+hexo+next搭建教程

    今天参考的是大神的教程，学了一个新东西，但是可能由于原教程中运用的npm包与我当前使用的npm包版本不同的原因，有出过多处运行错误，但都在此教程中解决了;

    总结了下命令：

    npm install hexo -g  全局安装

    hexo -v  查看当前版本

    hexo init 初始化

    hexo install  安装组件

    hexo g 生成加载页面

    hexo s 开启服务 http://localhost:4000/ 

    npm install --save hexo-deployer-git  部署git

    hexo d 部署 hexo

    前言

    本次我会逐步演示如何在Github上搭建自己的静态博客，先看看我之前已经搭建好的博客效果：https://zouchanglin.github.io很多东西呢只是正对自己喜欢的风格来选择的，比如博客的风格，我自己比较喜欢Next主题的风格，Github上的项目地址是：https://github.com/iissnan/hexo-theme-next ，大家也可以根据自己喜欢的风格自行选择！

    工具

    markdown编辑器

    由于我们写博客是需要使用markdown的语法的，一款好用的markdown文件编辑器必不可少，这个也是任凭大家自己选择，我个人比较喜欢使用Atom，这是一款跨平台的文本编辑器，用了一段时间感觉还不错。markdown语法很简单，在后面我会做一些简单的介绍。我也是最近才开始使用markdown来写博客，我以前是习惯在CSDN上写博客的，什么插入图片、插入代码、插入音乐、插入视频…之类的问题通通不用担心，这些坑我都踩过了，现在总结一下经验而已。Atom的下载地址：https://atom.io/ 安装过程很简单在此不赘述！

    Git工具

    这个不用说，提交代码必备，直接使用它的命令行工具就很OK，说到命令行大家也不用担心，常用的就那么几个，Git的下载地址：https://git-scm.com/download/win 安装过程很简单在此不赘述，安装完成后鼠标右键菜单就会多出两个选项：Git GUI Here 、Git Bash Here，其中Git Bash Here就可以在当前目录下打开Git的命令行！

    Node.js

    Node.js是一个Javascript运行环境,是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。hexo正是需要这个环境，所以安装安装Node.js是必不可少的，下载链接：http://nodejs.cn/download/ 安装过程也是非常简单，不在赘述！

    注意：上面Git工具和Node.js环境是必须安装的，Atom只是一个方便于我们编辑md文件的工具，可以先不安装！

    上述工具安装完成后，打开Windows的命令行，分别输入3个命令看看是否安装完成:
    node -v 、npm -v 、git –version 出现版本号即说明安装完成！

    Hexo

    Hexo简介

    hexo是个什么东西呢？总的来说就是把你的markdown文件转化为HTML静态页面的一种东西，浏览器是不会直接解析markdown文件的，所以我们需要把自己写的markdown文件先转化为HTML静态页面才能被浏览器解析，这个过程就需要Hexo来帮我们完成。更多内容请参考：http://coderunthings.com/2017/08/20/howhexoworks/ 这篇文章说的很详细！

    安装过程

    首先我们将本地的博客push到远程仓库中，本地博客得先有个存放位置，于是我们现在本地新建一个文件夹，名称随意(但是最好不要带中文和空格，对于一个程序员来讲，路径中包含中文或者空格简直是血的教训…)，我就在A盘下新建一个名称为hexo的文件夹

    然后进入到刚刚新建的文件夹，右键Git Bash Here，输入npm install hexo -g，开始安装Hexo,安装完成后输入 hexo -v 查看版本，出现如图所示信息即使安装成功

    完成上一步操作之后，我们需要初始化这个文件夹，输入hexo init 即可初始化该文件夹,可以看到初始化之后中文件夹中多出来了如此多的内容！

    接着我们需要安装一些组件，输入命令hexo install

    忙活了这么一大堆，现在该生成HTML静态资源文件了，输入命令hexo g完成页面的生成
    我们先在本地看看效果吧，输入hexo s开始服务器，地址是http://localhost:4000/ ,然后打开浏览器就会出现我们的页面：

    出现上面的页面就意味着我们成功了一半！

    Githu博客仓库的建立

    首先我们得申请一个Github账号，已有Github账号的跳过




    此时需要我们认证一下邮箱的内容，我就直接在Android端认证了，出现Your email was verified.即是认证成功，在PC端登陆自己的Github的账号就OK了

    接下来建立正式建立我们的博客仓库，点击Strat a Project即可

    注意仓库名称一定是你的Github用户名.github.io才是可以的
    注意仓库名称一定是你的Github用户名.github.io才是可以的
    注意仓库名称一定是你的Github用户名.github.io才是可以的


    如果在创建仓库的时候没有勾选创建一个README文件的话，就创建完成之后在创建一个就好了,点击README，之后点击Commit new File就OK了！

    此刻在浏览器输入https://你的Github用户名.github.io/,应该就会看到你的Github主页，如果显示404NotFound之类的请配置一下profile即可,或者有一定延迟或者浏览器缓存，请在网络一切正常的情况下进行相关操作！

    关联Github远程和本地仓库

    Git个人信息

    还是在博客根目录打开Git Bash Here

    • 设置Git的用户名和email：
    1
    2
    		 
    git config --global user.name "你的Github用户名"
    git config --global user.email "你注册Github使用的邮箱"
    • 生成ssh密钥

    1
    		 
    ssh-keygen -t rsa -C "你注册Github使用的邮箱"


    找到刚才生成的ssh密匙文件，复制其中的全部内容

    按照图片所示操作





    出现上图即配置完毕

    配置Deploy

    在博客根目录下找到_config.yml文件中，找到deploy，修改为

    1
    2
    3
    4
    		 
    deploy:
      type: git
      repo: repo: https://github.com/你的Github用户名/你的Github用户名.github.io.git
      branch: master

     

     

     

    开始部署

    当上述操作都完成之后，输入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github远程仓库，这个时候一般会遇到一个问题：

    这个时候我们需要执行一条命令

    1
    		 
    npm install --save hexo-deployer-git

     

     


    出现上图则说明安装成功，接着我们就可以直接使用命令hexo d部署了，首次使用ssh密匙的时候，需要我们输入一个yes确认一下

    接着输入一下我们之前设定的仓库密码就好了

    接下来，看看我们部署的效果：https://你的Github用户名.github.io 由于我们还未安装自己的主题，所以看到的是hexo的默认主题，效果如下，如果暂时无法部署远程仓库的话就只能在本地使用hexo s开启服务器，然后访问http://localhost:4000/ 来查看效果!

     

    安装主题

    下载主题

    这个主题大家可以自由选择，我个人比较推荐使用next主题，它的Github地址我已经子在前言中给出，选择Clone or download下载zip包即可，解压之后会获得一个叫做hexo-theme-next-master的文件夹，我们直接将文件夹重命名为next即可，然后将next文件夹copy到我们的博客根目录下

    修改配置文件

    博客根目录下，有一个_config.yml文件，修改其中的属性theme: next,注意”:”后面有一个空格，修改之后保存！

    重新生成资源

    使用命令 hexo g 生成静态资源，主要是指html文件

    重新部署

    使用命令 hexo d 重新部署到远程仓库，当然如果只是测试效果的话暂时其实没必要立马就部署到仓库，我们只需要 hexo s 开启本地服务器，然后访问http://localhost:4000/ 即可，然后就可以访问到修改过主题之后的效果



    到这里主题已经全部安装完成，但是界面是不是太过于简约了？接下来说说如何使用这些配置文件使博客变得更加美观！

    hexo命令总结

    命令简写原始写法用途解释
    hexo g hexo generate 生成静态资源，理解为生成静态网页即可
    hexo d hexo deploy 部署到远程仓库,每次部署需要输入密码
    hexo s hexo server 开启本地服务器，用于再无网络或者网速较慢的情况下快速查看博客效果
    hexo new page “页面名” hexo n page “页面名” 匹配新菜单项的内容
    hexo new “文章名称” hexo n “文章名称” 新建一篇文章

     

     

     

    本地仓库配置文件与主题配置文件

    本次仓库配置文件

    博客根目录下，有一个_config.yml文件，打开之后我会做一个属性说明
    我的配置文件如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    		 
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    #博客名称
    title: MyBlog
    #副标题
    subtitle: 一生只做浪漫极客
    #简介
    description: 发现累积的力量
    #博客作者
    author: Tim
    #博客语言
    language: zh-Hans
    #时区
    timezone: Asia/Shanghai<感谢姚栓同学的提醒，之前把Shanghai写成了Shanggai>

    # URL
    ## 如果你的网站被放置在一个子目录中，将URL设置为“HTTP://YouSIT.COM/CHED”，并将根设置为“/CHOR/”。
    url: http://yoursite.com
    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: 10
      order_by: -date

    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:

    # 日期时间格式
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss


    # 分页，每页文章数量
    per_page: 10
    pagination_dir: page


    # 主题配置
    theme: next

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:LiLiLiLaLa/LiLiLiLaLa.github.io.git
      branch: master

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    需要修改的地方：博客名称、副标题、简介、博客作者、博客语言、时区、主题配置、Deployment(之前已经修

    改好了)

    主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    # 要显示的菜单：主页、关于、标签、分类、归档、日程、站内地图、公益404
    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    # Schemes(自己选择一种排版风格，我比较喜欢Mist这种)
      #scheme: Muse
      scheme: Mist
      #scheme: Pisces
      #scheme: Gemini

     

     

     

     

     

     

     

     

     

     

    额外说明

    当上述步骤都完成之后，每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源，然后就可以在本地开启服务器进行预览

    之后我们点击分别点击一下关于、标签、分类、日程，除了首页可以点击之外，其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等，这是由于我们没有在本地建立相关的静态文件导致的

    还是在博客根目录下Git Bahs Here打开命令行，缺什么就新建什么，比如要新建关于、标签、分类、日程的页面

    1
    2
    3
    		 
    hexo new page "about"
    hexo new page "tags"
    hexo new page "categories"

     

     

     


    于是博客根目录下的source文件夹下就出现了about、tags、categories等文件夹，里分别有对应index.md文件

    • img文件夹是存放博客中图片的文件夹，这个稍后我会做出介绍
    • _ posts文件夹存放了我们写的博客，我们写的markdown文件就存放在此
    • 关于就是about里面的index.md文件了，这个版式比较随意，可以自己随便写一些自我介绍
    • 标签就是tags文件夹下的index.md文件，对于此文件我们需要做出如下修改

    • 分类就是categories里面的index.md文件，与tags相同，我们只需要把 type: “categories” 这一句加上即可

    注意：对于此类菜单里的页面来说，我们只需要做出一次修改即可，一旦把文章类型(即type属性)申明为tags、categories…hexo就会帮我们自动填充内容，会根据你文章的变化一起变化，无需我们手动进行修改！

    博文相关操作

    新建文章

    接下来还得说说新建文章，毕竟搭建好了博客，不就是要写点东西嘛！

    1
    		 
    hexo new "文章名"

     

     

    新建好了之后，我们发现在source文件夹里面帮我们创建好了markdown文件，我们需要做的就是直接开始编辑markdown就好了，比如我新建了一个MyTestBlog
    怎样对文章进行分类和添加标签呢？只需要做如下编辑

    写的时候一定要注意格式，”:”后面都是有空格的

    删除文章

    这个没啥好说的，我们的所有文章都是放在source\_ posts下面的，直接删除相应的markdown文件即可

    编辑文章

    基本语法

    基本的markdown语法在这里不在赘述，基本语法请参照https://www.jianshu.com/p/0130ad32a08d 或者自行百度，很多博客都讲述了markdown的基本语法

    插入图片

    这个功能由于经常用到，我把它单独拿出来说一下，首先先在source文件夹下面新建一个文件夹用来存储图片，文件夹名称为img，其他名称也是可以的，然后将要插入的图片放在该文件夹下，命名不要太复杂,也不要有中文名称，比如将2018050899.png放进去，当我们需要插入图片的时候，只要按照如下写法就可以将图片插入了，在这里注意图片的书写路径，如果在本地预览的话需要写成这样的写法 (../img/2018050899.png) ，但是在服务器上的相对路径却不是这样，而是不需要上一级目录的标识，按照如下写法即可<感谢来自李仁单的建议>：

    1
    		 
    ![图片无法正常显示的时候的说明文字](/img/2018050899.png)

     

     

    插入代码

    如果我们已知是什么语言的代码（比如Java），就写上Java ;如果不知道的话也可以不写

    1
    2
    3
    4
    5
    		 
    public class Demo{
          public static void main(String[]args){
              System.out.println("Test Code");
          }
    }

     

    主题配置优化

    添加搜索功能

    首先我们需要安装一个hexo-generator-searchdb

    1
    		 
    npm install hexo-generator-searchdb --save

     

     

    修改本地配置文件，博客根目录下的_config.yml文件,如果没有就添加search属性并做如下配置:

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

    修改主题配置文件
    我的路径：/博客根目录/themes/next下的_config.yml文件：

    local_search:
    enable: true

    注意:每个冒号后面都有空格。如果next主题在5.1.1以上的话就不用我这样设置，直接在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了

    首页显示文章摘要

    这样可以在首页更快的找到最近的文章，不至于篇幅太长

    标签图标修改

    默认的标签无图标，是一个”#”，这个是可以修改的：
    修改模板 /themes/next/layout/_ macro/post.swig，搜索 rel=”tag”>#，将 # 换成

    隐藏powered By Hexo / 强力驱动

    打开themes/next/layout/_ partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。

    动态背景

    直接在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了

    注意分号后面要加一个空格
    Github的服务器离我们比较远，hexo d提交后可能没有立即看到效果，等待几分钟就好了，推荐方法是直接在本地预览，都修改好了再提交到Github服务器，有时候浏览器有缓存，需要多次刷新才可以看到效果！！！

    结语

    以上就是我的博客的搭建全过程，以后会增加留言或者评论的功能，现在只能这样了，我的过程也不一定适用于每一个人，可能会有很多隐藏的问题，

     

     

    文章来源：https://zouchanglin.github.io

     
  • 相关阅读:
    记录某次应急演练
    C++之分文件编写
    C++之冒泡排序实现
    cobaitstrike之修改特征
    cobaitstrike之DNS上线
    网盘搜索【不断更新ing】
    CVE-2021-2109 Weblogic Server远程代码执行
    C++之一维&二维数组
    CDH-5.12.2安装教程
    linux安装mysql教程
  • 原文地址：https://www.cnblogs.com/Anderson-An/p/9963014.html
Copyright © 2011-2022 走看看