jinl's blog

上校，马孔多在下雨。

0%

使用Hexo和GithubPage免费搭建博客网站

发表于 更新于 分类于 ， 阅读次数： 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

------------ 感谢你的阅读 ------------