从零开始搭建Hexo-Github博客(基于Next主题)

一、前言

一直以来都想搭个博客，每次都是弄到一半就没有写了。（PS:不知道该怎么操作了！）
不过如果你跟着我的教程来，半个小时肯定能完成这件事！
Hexo，看起来还挺不错的，蛮简约的，感受一下吧

本篇教程分为三个部分：

  • 搭建you_site服务器
  • 部署到github上
  • 优化博客的主题

二、Hexo安装

2.1 Hexo简介

在搭服务器环境之前，先简单介绍一下Hexo。Hexo是一个简单的、轻量的、基于Node.js的一个静态博客框架。通过Hexo我们可以快速创建自己的博客，仅需要几个命令就可以完成。

Hexo特性：

  • Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
  • 支持GitHub Flavored Markdown和所有Octopress的插件。
  • Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less。

Hexo的官网,也是基于Github构建的网站

2.2 Hexo环境配置

在安装Hexo之前需要先安装一些它所依赖的环境配置。

这里说的主要是针对 mac (ps:没有windows电脑)，mac上安装一些软件的时候，我个人建议先安装一下Homebrew,它相当于一个软件管理工具，不管是安装还是卸载都比较方便。

不多说，安装Homebrew也很简单，利用mac自带的ruby脚本功能，打开终端输入:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成之后，接下来安装git和node.js简单多了。

2.3 Git安装

  • 安装了Xcode的可以直接跳过这步，因为Xcode自带git

个人建议使用这种方式安装，不要使用网上的安装包进行安装，安装node.js也是。因为有些博客里的安装包有些过时。

打开终端：

$ brew install git

2.4 Node.js安装

$ brew install git

使用 Homebrew 方式安装，node被安装在/usr/local/Cellar/node/ 中，自带安装好npm组件。
想测试自己是否安装成功了，可以在桌面新建一个hello.js文件

var http = require('http');
http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8808, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8808');

然后打开终端，先跳转到桌面，然后在终端输入

node hello.js

然后用浏览器打开终端显示的那个网址，我的显示的是：http://127.0.0.1:8808，不知道会不会每个人都不一样。如果看到了Hello World字样，就说明安装成功了。

另外node.js还可以手动安装或者利用nvm安装，这里就不介绍了。

2.5 Hexo安装

在终端输入：

sudo install hexo -g

前面的sudo表示用管理员身份运行，所以可能会提示你输入电脑的开机密码

这样，就把Hexo本体和其相依套件安装完毕了，很简单吧。

另外
以后更新Hexo到最新本直接在终端输入:

sudo npm update hexo -g

接下来，就可以初始化一个放置你以后写文章的专属文件夹:

  • 现在电脑上某位置创建一个文件夹
  • 然后打开终端，跳转到文件夹所在的位置
  • 在终端输入hexo init

初始化之后会稍等一会，然后终端会出现

INFO  Start blogging with Hexo!

这样的字样就成功了，去目录查看，可以看见生成了对应的文件以及文件夹，以后我们的操作基本都在这里面了。

终端输入:

pwd

显示当前路径，如果不在我们刚才init的文件夹里，那么就跳转到那个路径。
接下来，我们的终端进入到我们刚刚init的文件夹路径，进入我们的文件夹后，在终端输入：

hexo s

hexo s是hexo server的简写
终端结果显示:

Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

复制地址，在浏览器中打开，结果显示：
image

说明Hexo在你的电脑已经安装成功，里面出现的是默认的一篇文章，当然你也可以自己新建一篇文章，
在终端按住：ctrl+c 停止服务，然后输入：

hexo new "Hello Hexo"

新建的文章，可以在根目录的source/_posts目录下找到，并且可以使用支持Markdown语法的编辑器来对它进行内容编辑。
再次启动Hexo服务器，通过在终端输入命令：

hexo s

启动服务。

三、将文章部署到gitHub

3.1 创建github仓库

首先，你得有一个github账号，没有的话去申请一个吧。这里就不介绍了。
登陆github账号后，点击左上角的+号创建一个新的仓库：
image
进入到创建仓库界面
image
一切填完之后，就点击create repository按钮了。
这里有个注意点：

Repository name 不可以乱写，是固定的写法,也就是必须是你的用户名+github.io这种格式，
它也将是你个人博客的域名。也就是别人输入这个 网址来访问你的博客。

到这里仓库就创建完成了，我们下一步就是将它和我们init的那个文件夹关联。

3.2 配置本地文件

打开我们init好的那个文件夹，找到_config.yml文件，这就是全局配置文件，通过配置里面的参数，来与我们的github上的仓库进行关联。
打开这个文件，找到最下面：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

这段代码，然后修改成这样：

deploy:
    type: git #部署类型，使用github
    repository: https://github.com/LZAscott/LZAscott.github.io.git #部署的仓库的https
    branch: master #部署分支， 一般使用master主分支
    message: update #默认类型

这里有两个重要的参数：（其他两个参数可以参照着写）

  1. type：Hexo之前的版本好像是填github，但是Hexo3.0之后，必须填git，我的Hexo是最新的3.2.0，填写git。
  2. repository这个参数，很重要，它就是用来链接我们在github上创建的创库。看网上有的人使用SSH，但是SSH配置起来相对有些复杂，我这里用的是HTTPS方式，也是可以成功的。

注意：每个参数的冒号(:)后面必须留一个空格，否则会出现语法错误

然后在终端输入：

npm install hexo-deployer-git --save

等出现信息：

└── hexo-deployer-git@0.1.0

接下来就可以把你的文章部署到github上去了。

在终端输入命令:

hexo d

hexo d是hexo deployer的缩写，
待终端出现：

INFO  Deploy done: git

就表示成功啦。是不是有点小激动呢。
现在你可以在浏览器输入http://your_username.github.io
这里的your_username就是你的github账号昵称
以后每次新建文章后，待你完成编辑。即可以执行下面几个命令来把新的文章部署到服务器上:

  • hexo clean
  • hexo g
  • hexo d

附:

Hexo部署常见问题解决方案

至此，Hexo和gitHub的部署算是完成了。接下来的任务就是优化你的主题了。
我使用的是Next主题，所以接下来将的是基于Next主题，如果喜欢其他主题的童学就关闭此页面了。

四、优化主题

4.1 Next主题的安装使用

首先用终端跳转到你通过Hexo init的根目录，然后在终端输入：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

完成只有，进入站点的全局配置文件: _config.yml
找到 theme 字段，设置为

theme: next

到这里就可以验证一下主题是否被使用。终端输入：

hexo s -- debug

然后本地访问:http://localhost:4000 看看效果，在没有部署到github之前，一般都可以这样在本地进行预览。
关于站点全局配置文件_config.yml的其他一些参数:

# Site
title: Scott_Mr
subtitle: 越努力，越幸福
description:
author: Scott_Mr
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: lzascott.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:

默认的大致就这些，另外给主题添加相关功能的时候会慢慢加上一些参数。

4.2 给站点添加友情链接功能

直接在站点全局配置文件_config.yml添加参数:

#友情链接
links_title: 友情链接
links:
  百度: http://www.baidu.com/

如果没有链接，那么友情链接不会显示，为了测试，可以随便写一个

4.3 给站点添加多说评论、热评、分享功能

直接在全局配置文件_config.yml添加参数：

# Disqus  disqus评论,  与多说类似, 国内一般使用多说
#disqus_shortname: 
duoshuo_shortname: test

# 多说热评文章 true 或者 false
duoshuo_hotartical: true

# 多说分享服务
duoshuo_share: true
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id:
      admin_nickname:

注意： 这里的duoshuo_shortname是需要你去多说主页 注册一个账号，然后填写你的多说域名，这里填写的就是你在多说填写的域名
例如：我的是：http://test.duoshuo.com/，那么我填写的就是test

* 这里配置的是所有页面都支持评论，但是后面有的页面不需要，比如标签页，分类页，关于等等，那么就单独设置。

4.4 配置个人头像

在主题配置文件（打开博客根目录/themes/next，这个路径，然后打开，主题配置文件_config.yml）里面找到avatar字段（ps：如果没有就添加）

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: http://test.jpg

我采用的是地址，并没有将图片放本地(你可以选择新浪微博的相册里面的图片链接)

4.5 Next主题选择

在主题配置文件_config.yml里面，找到scheme字段

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

我选择第三种，去掉#,然后在第一个前面加个#
提醒：没进行一步都可以自己去本地预览，采用命令行hexo s -- debug

4.6 主题菜单配置

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html


# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
  1. 如果需要添加你自己自定义的菜单，那么就只需要在menu下添加相关的菜单项，然后新建页面与之匹配，然后去next主题目录的languages目录下找到我们之前配置的主题所使用的语言，（我们用的是zh-Hans）对其进行国际化。
  2. menu_icon的设置采用key-value。key对应上面的menu里面的菜单项，大小写一致，value就是对应FontAwsome icon这个网站的图标的名字，去掉前缀icon

关于这里的所有的图标都支持从FontAwsome icon这个网站获取，当然也可以自己放在资源文件夹里（一般比如个人头像(avatar)，网站图标(favicon)等)。当然也支持从网址获取，推荐使用七牛云存储。当然也可以使用新浪博客的相册，谷歌相册，甚至QQ空间，都可以，只要能获取到图片网址，并且你不会轻易删掉。

4.7 添加关于、标签、分类页面

菜单配置好了，但是我们还得新建一些页面与之匹配，否则点击进入找不到。这里说一下，对于标签页和分类页，我们需要在新建一篇文章的时候指定它的标签和分类。对于刚开始建立的博客，点进去可能是空的，所以等会新建一篇文章试试，这之前，先建立相关页面。

  • 添加标签页
    打开终端，进入博客根站点，输入:

      hexo new page tags

    进入博客根目录/source路径，找到tags文件夹，可以看到生成了index.md文件。可以使用编辑器打开,在里面添加tags和comments

    1. tags设置页面的类型
    2. comments用来控制是否显示评论的

  • 添加分类页

      hexo new page categories

    进入博客根目录/source路径，找到categories文件夹，可以看到生成了index.md文件。可以使用编辑器打开,在里面添加categories和comments

    1. categories设置页面类型
    2. comments用来控制是否显示评论的

  • 添加关于页

      hexo new page about

    进入博客根目录/source路径，找到about文件夹，可以看到生成了index.md文件。可以使用编辑器打开,在里面添加about和comments

    1. about设置页面类型
    2. comments用来控制是否显示评论的

新建一篇文章给它添加分类和标签试试吧：

hexo new "Hexo教程"

通过有Markdown语法的编辑器打开：添加tags 和 categories

---
title: title #文章标题
date: 2016-06-04 21:47:44 #文章生成时间
categories: "Hexo教程" #文章分类目录 可以省略
tags: #文章标签 可以省略
     - 标签1
     - 标签2
 description: #你对本页的描述 可以省略
---

4.8 Next主题侧边栏社交链接

打开主题配置文件_config.yml：

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------


# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  GitHub: https://github.com/LZAscott
  新浪微博: http://weibo.com/3328555050/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1


# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  # Twitter: twitter
  Weibo: weibo

这里的配置和Menu里一样

  1. social后面跟着的是你的社交网站的主页地址
  2. social_icons是FontAwesome网站的图标名称

4.9 开启打赏功能

很简单，打开主题配置文件_config.yml，添加字段:

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
alipay: http://7xv28v.com1.z0.glb.clouddn.com/IMG_1070.JPG

注意：alipay: 填写的是支付宝或者微信的收款二维码图片地址。

4.10 设置网站的图标Favicon

favicon图标也就是我们打开一个网页，出现在最浅的图标样式，可以自定义，首先我们需要一个favicon.ico的图标，图标制作好后，上传到云存储空间，获取图片的网址，然后打开主题配置文件_config.yml，找到favicon字段，将图片网址粘贴在后面，即可。

4.11 结束语

到此，搭建博客的整个过程就已经完成了，你现在可以在本地预览，也可以将它部署到github上去了。

终端执行这三个步骤：

  • hexo clean
  • hexo g
  • hexo d

然后在浏览器上输入your_name.github.io去欣赏吧。

posted @ 2023-12-02 13:58  Scott_Mr  阅读(48)  评论(0)  编辑  收藏  举报