winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

1、新建一篇文章

（1）在hexo博客目录下，进入Git Bash命令窗口中，输入以下命令：

1
hexo new "在这里"

（2）在博客目录下的/source/_posts/ 文件夹下，可以看到已经生成了标题为(在这里.md)的博客文件：
如图所示：
生成的博客文件
（3）在（在这里.md)文件中编辑自己的博客文章即可。
注意：Hexo 发布的文章是 Markdown 格式的文件， Markdown 基本语法的网址：点这里前往

2、给文章添加分类和标签

(1) 在（在这里.md）文件中设置tags和categories属性：

1
2
3
4
5
6
title: 在这里
date: 2018-08-02 11:41:10
tags:
- 博客           //多个标签可以这样添加
- hexo
categories: web前端

如图所示：
博客文章-基本设置

3、启动服务器，本地测试

1
hexo s

如图所示：
查看博客文章

4、添加“阅读全文”按钮

方法一：在文章任意你想添加的位置添加<!--more-->即可

1
<!--more-->

例如：
在这里.md里面的内容是：

1
2
3
4
5
6
7
8
9
10
11
---
title: 在这里
date: 2018-08-02 11:41:10
tags:
- 博客
- hexo
categories: web前端
---
javascript是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript
<!--more-->
后面的内容在首页不显示，只显示到<!--more-->这里

在页面中显示的效果是：
阅读全文按钮-更多
方法二：设置首页文章以摘要形式显示，打开主题配置文件，找到auto_excerpt进行修改：

1
2
3
auto_excerpt:
  enable: true
  length: 150

其中length代表显示摘要的截取字符长度。
注：这两种方法，在博客首页显示的效果不一样，根据自己的需要，选择自己喜欢的方法

5、在博文中添加图片

方法一：
(1)在hexo目录下，安装插件：

1
npm install hexo-asset-image --save

(2)在hexo\source 目录下新建一个img文件夹，把图片放置在里面；
(3)在xxx.md文件中引用图片：

1
![header]( img/header.jpg)

方法二：
(1)在全局配置文件（hexo/_config.yml)中将post_asset_folder设置为true；
(2)创建文章（在创建的时候，会在hexo/source/_post目录下，生成一个XXX.md文件和一个XXX的文件夹）：

1
hexo new "XXX"

(3)把XXX这个博文需要展示的图片放在XXX文件夹目录下；
(4)在XXX.md文件中引入图片的方式：

1
{% asset_img example.jpg This is an example image %}

6、发布到Github上

（1）发表的文章在本地预览无误后，在 Git Bash 命令窗口执行以下命令：

1
hexo clean && hexo g && hexo d

（2）在浏览器，访问自己的博客域名，即可看到刚 发布的文章

发表于 更新于 分类于

1、下载NexT主题，下载解压后，将该文件夹命名为next，把这个文件夹放置到博客目录的themes 文件夹下，如图所示：
将主题的文件夹命名为next
想了解更多，可以查看NexT 主题使用文档： 官方使用文档

2、修改主配置文件_config.yml（hexo目录下的_config.yml文件)，将theme属性修改为next，如下所示：

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

3、在博客目录，右键点击Git Bash，进入命令窗口，输入下面的命令，本地预览博客，如果发现Hexo博客的主题已经变成了NexT主题，说明你已经成功更换主题了

1
hexo server

4、打开主题配置文件 _config.yml
如图所示：
打开主题配置文件 _config.yml
5、在主题配置文件 _config.yml中将scheme设置为 Pisces（Hexo默认样式是Muse，根据你自己的喜好选择你想要设置的样式，这里以Pisces为例)

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

6、在主题配置文件 _config.yml中配置博客网站底部的基本信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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: winney07   #版权所有
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false    #是否显示主题
    # Version info of NexT after scheme info (vX.X.X).
    version: false     #是否显示驱动

7、在主题配置文件 _config.yml中配置菜单按钮，找到menu属性，做以下配置：

1
2
3
4
5
6
7
8
9
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、创建相应的页面
（1）执行命令hexo s，本地预览我们的博客页面，会发现，点击分类、标签、关于这几个页面的时候，会显示404。
（2）在Git Bash命令窗口，输入以下命令来创建相应页面：

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

（3）可以在hexo/source目录下看到创建的3个文件夹
如图所示：
在hexo/source目录下看到创建的3个文件夹
9、每一个分类菜单都生成了一个 index.md 初始文件（在刚创建的文件夹目录下)，默认包含了 title 和 date 字段，我们需要给每一 index.md 文件添加上 type 字段
如下所示：

1
2
3
4
5
---
title: categories
date: 2018-07-30 16:28:33
type: categories
---
1
2
3
4
5
---
title: tags
date: 2018-07-30 16:28:54
type: tags
---
1
2
3
4
5
---
title: about
date: 2018-07-30 16:29:13
type: about
---

10、配置搜索菜单：
（1）安装 hexo-generator-searchdb ，在 Git Bash 命令窗口，输入以下命令：

1
npm install hexo-generator-searchdb --save

（2）打开全局配置文件（hexo/_config.yml），新增以下代码：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

（3）打开主题配置文件（hexo/themes/next/_config.yml），找到 local_search 属性，开启本地搜索功能：

1
2
3
4
5
6
7
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、执行命令hexo s，本地预览我们的博客页面，发现刚才的配置已经完成
如图所示：
预览本地博客页面
12、在命令窗口，输入以下命令，将修改后的本地hexo项目托管到GitHub上

1
hexo clean && hexo g && hexo d

13、上传成功后，可以通过自己的博客域名访问修改主题和修改相关配置后的博客页面

发表于 更新于 分类于

一、准备工作

1. 安装Node.js

  1. 下载Node.js：官网下载地址（这里以Windows 为例）：
    下载Node.js

  2. 双击下载好的.msi文件，按下一步下一步，安装好就可以；

  3. 在cmd命令窗口，输入下面的这个命令，如果能够显示Node.js的版本，说明安装成功了。

    1
    node -v

    查看node版本

    2. 安装Git

  4. 下载Git：官网下载地址（这里以Windows 为例，我是在这里下载的） 你也可以到官网下载 ；

  5. 双击下载好的Git安装包，按下一步下一步，进行安装即可；

  6. 在cmd命令窗口，输入下面的这个命令，如果能够显示Git的版本，说明安装成功了。

    1
    git -version

    查看git版本

  7. 想对Git有更多的了解，可以从下面几个网站学习，若你有更好的网站，也可以推荐给我：

二、Hexo搭建博客

1. 安装Hexo

  1. 在计算机中，新建一个winneyBlog文件夹，用于存放自己的博客内容。

  2. 在winneyBlog文件夹内，鼠标右键，选择Git Bash,进入到命令窗口
    博客目录-进入命令窗口

  3. 在命令窗口中，输入下面代码：

    1
    npm install -g hexo-cli

    如图所示：
    安装hexo-cli

2. 初始化Hexo

  1. 在命令窗口中，输入下面代码：(会在winneyBlog目录下，新建了一个hexo文件夹)

    1
    hexo init hexo

    如图所示：
    初始化hexo

3. 配置Hexo

  1. 进入hexo文件夹

    1
    cd hexo

  2. 安装依赖

    1
    npm install

  3. 部署形成的文件

    1
    hexo generate

    如图所示：
    部署形成的文件

4. 启动服务器

  1. 在命令窗口执行下面代码：

    如图所示：（想要进行别的命令操作，可以按Ctrl + C停止服务器）
    启动服务器

    1
    hexo server

  2. 在浏览器地址栏中输入http://localhost:4000/ （默认端口是4000），如果能够看到如图所示的效果，说明初始化的Hexo博客搭建成功了。
    如图所示：
    浏览器中查看博客

三、将本地的 Hexo 博客部署到 GitHub Pages上

  1. 新建一个仓库，仓库名为winney07.github.io（这个仓库的名称必须严格按照 username.github.io 的格式来命名）【前提是你要有一个Github账号】
    如图所示：（因为我已经创建过这个库了，所以会显示红色警告，只是后来为了截图，重新写一个同名的）
    创建仓库

  2. 进入已经创建好的仓库（点击自己的头像，选择Your profile，点击刚创建好的那个仓库进去仓库里面），点击settings，找到GitHub Pages 选项，点击 Choose a theme 选择一个主题（可以选择也可以不选择，根据自己的需求决定是否操作这一步）
    如图所示：
    配置Github Pages

  3. 配置Git个人信息，在winneyBlog目录下，鼠标右键，选择Git Bash，进入命令窗口，输入下面的命令

    1
    2
    git config --global user.name "Github用户名"       //自己Github的账号名
    git config --global user.email "Github邮箱"        //自己注册Github的邮箱地址

  4. 生成SSH KEY,意思是生成一个公钥和密钥，因为Github需要一个密钥才能与本地相连接。在命令窗口输入下面的命令，然后需要连续按3次回车生成密钥（每按一次回车你可以看到对应的信息） 【你也可以先查看是否已经有了ssh密钥：cd ~/.ssh 如果没有密钥则不会有此文件夹，有则备份删除】

    1
    ssh-keygen -t rsa -C  "Github邮箱"        //自己注册Github的邮箱地址

    如图所示：
    生成SSH KEY

  5. 生成的SSH KEY会保存到 C:/Users/电脑名用户名/.ssh 目录中（根据你自己电脑用户名，打开对应的目录）
    SSH KEY存放目录
    （1）打开.ssh 这个目录，打开 id_rsa.pub 文件，复制里面的全部内容（这些内容就是密钥）
    打开 id_rsa.pub 文件

  6. 在GitHub中添加SSH keys

    1. 打开Github，点击头像，选择Settings；
      设置
    2. 选择SSH and GPG keys项,点击右上角New SSH key按钮，将刚刚复制到的密钥粘贴到key输入框中，title自己给它命一个名就好
      添加ssh key 到仓库
    3. 最后点击Add Key，如果显示这样的界面，说明SSH KEY 配置成功：
      SSH KEY 配置成功

  7. 修改全局配置文件

    1. 在hexo文件夹下，找到_config.yml文件；
      如图所示：
      _config.yml文件
    2. 复制仓库地址：
      如图所示：
      复制仓库地址
    3. 修改_config.yml文件里的deploy属性(目的是将本地hexo项目放到Github上)
      如图所示：
      修改_config.yml文件里的deploy属性
      注：【如果repository中填写的是https协议的，hexo d上传代码到Github时有下面类似错误，可以将repository改为ssh的链接】
      如图所示：
      报错信息
      使用 SSH链接

  8. 安装hexo-deployer-git 插件，目的是将代码快速托管到Github上

    1
    npm install hexo-deployer-git --save

  9. 将hexo项目托管到GitHub上（命令可以分开写也可以一起写）

    1
    hexo clean && hexo generate && hexo deploy

    备注：
    hexo clean ：清除缓存文件 (db.json) 和已生成的静态文件 (public)
    hexo generate ：部署之前预先生成静态文件，简写为hexo g
    hexo deploy : 文件生成后立即部署网站，简写为hexo d

  10. 在浏览器地址栏输入 https://username.github.io/ 即可访问，（username也就是你的Github账户名），如果能够正常访问，并且跟本地hexo项目显示的内容是一样的，那么说明你已经把本地hexo项目部署到Github上了。

四、配置博客的个人信息

  1. 在hexo目录中，找到全局配置文件_config.yml

  2. 配置信息如下所示：

    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
    84
    85
    86
    87
    88
    89
    90
    91
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site 站点信息配置
    title: winney     #站点名
    subtitle: It is never too old to learn.  #站点副标题
    description: Doing is better than saying.     #站点信息简介
    keywords: winneyBlog   博客
    author: winney   #站点作者
    language: zh-Hans     #站点语言，default默认是英文，zh-Hans是中文
    timezone: Asia/Shanghai      #时区

    # URL   博客地址
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://AAAAAAAAAA.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: true
    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
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git    #部署的类型
      repository: https://github.com/AAAAAAA/AAAAAAA.github.io.git    #仓库地址
      branch: master    #分支名称
      message: hexo deploy  #提交信息

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

    注意：.yml 文件有严格的格式要求，文件里所有的配置都是：冒号 空格 值，并且冒号是英文状态下的输入。想了解更多的可以前往 官网 。

  3. 在博客目录下，右键点击Git Bash，进去命令窗口，输入下面的命令，即可在浏览器中看到刚刚设置的内容显示在页面中：

    1
    hexo server    // 简写为 hexo s

提交到远程仓库报错

报403或者每次提交都要输入账号密码

可以将_config.yml里的

1
repository: https://github.com/*********.github.io.git   #仓库地址

改为：

1
repository: git@github.com:*********.github.io.git   #仓库地址