jinl's blog

上校，马孔多在下雨。

0%

发表于 更新于 分类于 ， 阅读次数： Valine：

安装

如果已经安装了下面两个软件，那么可以直接安装Hexo了。

1. 安装Node.js

安装node，也可以去node.js中文网下载

注意：windowns 用户要把 “Add to Path” 勾选上

2. 安装Git

Windows: 下载
MAC: ▶ brew install git
Linux (Ubuntu, Debian)：▶ sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：▶ sudo yum install git-core

3. 安装Hexo

1
▶ npm install -g hexo-cli

上述步骤完成后，就可以进入下一环节——生成项目文件了。

建成

1. 生成

  • 打开cmd或者powershell，进入要放置文件的目录，再生成目录和博客文件。
    1
    ▶ hexo init blog(自定义)
  • 进入对应目录
    1
    ▶ cd blog
  • 安装npm 
    1
    ▶ npm install

2. 配置

  • 打开 _config.yml文件，来进行详细博客网站配置
    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: Hexo # 网站名字
    subtitle: '' # 网站副标题
    description: '' # 网站描述
    keywords:  # 关键词
    author: John Doe # 作者名字
    language: zh-CN # 语言选择 "zh-CN"
    timezone: 'Asia/Shanghai' # 时区选择 "Asia/Shanghai"

    注：内容与注释之间需要空格隔开
    更多详细配置可以访问 Hexo 的中文文档

3. 写文章

输入▶ hexo new TestArticle，出现下列文字，

1
INFO  Created: D:\web\my_blog\source\_posts\TestArticle.md

说明创建文章成功。
打开并编辑该文件

1
2
3
4
5
6
---
title: TestArticle
date: 2020-05-21 21:39:56
tags:
---
生活就像海洋，只有意志坚强的人才能到达彼岸。

4. 发布

  • 生成静态文件

    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
    ▶ hexo generate
    INFO  Start processing
    INFO  Files loaded in 248 ms
    INFO  Generated: index.html
    INFO  Generated: archives/index.html
    INFO  Generated: fancybox/blank.gif
    INFO  Generated: fancybox/jquery.fancybox.css
    INFO  Generated: fancybox/jquery.fancybox.pack.js
    INFO  Generated: fancybox/fancybox_sprite.png
    INFO  Generated: fancybox/fancybox_overlay.png
    INFO  Generated: fancybox/jquery.fancybox.js
    INFO  Generated: fancybox/fancybox_loading.gif
    INFO  Generated: fancybox/fancybox_loading@2x.gif
    INFO  Generated: fancybox/fancybox_sprite@2x.png
    INFO  Generated: fancybox/helpers/fancybox_buttons.png
    INFO  Generated: archives/2020/05/index.html
    INFO  Generated: archives/2020/index.html
    INFO  Generated: css/fonts/FontAwesome.otf
    INFO  Generated: js/script.js
    INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
    INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
    INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
    INFO  Generated: css/style.css
    INFO  Generated: css/fonts/fontawesome-webfont.eot
    INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
    INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
    INFO  Generated: css/fonts/fontawesome-webfont.woff
    INFO  Generated: css/fonts/fontawesome-webfont.ttf
    INFO  Generated: css/fonts/fontawesome-webfont.svg
    INFO  Generated: 2020/05/21/TestArticle/index.html
    INFO  Generated: 2020/05/21/hello-world/index.html
    INFO  Generated: css/images/banner.jpg
    INFO  29 files generated in 978 ms

    该命令可以简写为 hexo g

  • 启动本地服务器

    1
    2
    3
    ▶ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

  • 打开浏览器，输入 http://localhost:4000

  • 出现下述画面后，博客可以算是初步完成了。
    结果截图

更多详细的命令，可以参考官方文档

部署

github上有一个免费的 GithubPages 供大家使用。

Websites for you and your projects.

1. 仓库

  • 打开github注册账号。
  • 新建一个 Repository，仓库名为 yourname.github.io，例如 jinl1874.github.io，
  • “Description”选填，
  • 勾选”Initialize this repository with a README”，
  • 最后点击”Create repository”。
  • 点击仓库左边的Settings，把yourname.github.io填进”Repository name”，最后点击”Rename”。

2. 连接

将本地git与github连接起来

  • 创建SSH Key
    1
    ▶ ssh-keygen -t rsa -C "youremail@example.com"

    把上面的邮件地址换成你自己的邮件地址，然后一直回车

  • 进入你的主目录[C://Users//xxx]，勾选查看隐藏文件，找到.ssh目录，用记事本打开id_rsa.pub，复制全部内容。
  • 打开github的”Settings”，点击”SSH and GPG keys”，再”New SSH key”，起一个名字，然后把刚才复制的内容放在key里面，最后点击”Add SSH key”。
  • 这样，你的git就与远程仓库github连接起来了。

3. 上线

  • 安装 hexo-deployer-git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ▶ npm install hexo-deployer-git --save
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-deployer-git@2.1.0
    added 1 package from 1 contributor in 2.588s

    5 packages are looking for funding
      run `npm fund` for details

  • 更改配置，打开_config.yml，找到deploy

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: <repository url> # https://github.com/jinl1874/jinl1874.github.io.git
      branch: master

  • 运行hexo deploy(可简化为hexo d)，打开浏览器，输入(yourname.github.io)即可访问网站。

使用

发表文章

  • 写好文章后使用下面两条命令进行发表
    1
    2
    hexo g # 生成静态页面
    hexo d # 同步到github page

改进

1. 使用自己的域名

  • 前往阿里云或者腾讯云注册自己的域名。
  • 在yourname.github.io的setting里，找到”Custom domain”，将其更改为你的域名后保存。
    githubPage
  • 到域名控制台上，找到域名列表点击解析设置，添加两个CNAME类型即可。
    cname

2. 使用next主题

  • 下载安装

    1
    2
    ▶ cd your-hexo-site
    ▶ git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 打开站点_config.yml，找到theme字段，并更改为next

    1
    theme: next

  • 设置布局。打开主题配置文件_config.yml（与上个_config.yml不同），设置 Scheme

    1
    2
    3
    4
    5
    # Schemes
    # scheme: Muse # 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
    # scheme: Mist # Muse 的紧凑版本，整洁有序的单栏外观
    #scheme: Pisces # 双栏 Scheme，小家碧玉似的清新
    scheme: Gemini # 个人更喜欢双栏分割

  • 设置菜单
    把home, categories, archives, tags, schedule,以及about留下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      tags: /tags/ || fa fa-tags
      about: /about/ || fa fa-user
      schedule: /schedule/ || fa fa-calendar
      # sitemap: /sitemap.xml || fa fa-sitemap
      # commonweal: /404/ || fa fa-heartbeat

    添加对应的页面

    1
    2
    3
    4
    5
    hexo new page tags
    hexo new page categories
    hexo new page archives
    hexo new page cabout
    hexo new page schedule

更多next主题配置请访问next官方文档

欢迎访问个人博客主页jinl1874

发表于 阅读次数： Valine：

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment