Hexo + Github搭建自己的博客

Hexo + Github搭建自己的博客_第1张图片
效果预览

技术博客地址:DoubleDragon's Blog
博客项目文件地址:https://github.com/wsl2ls/Wsl2Ls.github.io

目录

一、 搭建环境
二、hexo创建本地博客
三、设置自己喜欢的博客主题
四、将本地博客部署到github
五、新建博客文章
六、接入Gitment评论系统

一、 搭建环境

1、下载安装Node.js和Git
  • Node.js:Node.js下载地址
  • Git:使用命令行 $ brew install git安装或者 点击这里下载安装程序
Hexo + Github搭建自己的博客_第2张图片
查看版本

辅助命令:

    *   查看当前node版本号:`$ node -v`
    *   清除node.js的cache:`$ sudo npm cache clean -f`
    *   安装n,用来管理node版本: `$ sudo npm install -g n`
    *   安装最新版本node:`$ sudo n stable`
    *   查看当前git版本号:`$ git --version`
2、使用 npm 安装 Hexo
  • $ npm install hexo-deployer-git --save
  • $ hexo version #查看Hexo的版本


    Hexo + Github搭建自己的博客_第3张图片
    安装 Hexo

二、hexo创建本地博客

使用命令行创建博客:$ hexo init 博客项目名 ,这里的博客项目名我用的是wsl.github.io,完成后,会在你的 /Users/yourname下创建一个wsl.github.io文件夹;然后可以通过命令行部署一下本地环境,然后就可以在浏览器中预览本地博客了。

$ hexo init wsl.github.io   //创建本地博客

$  cd wsl.github.io  //进入博客目录
$  hexo clean  //清除缓存
$  hexo g  // hexo generate重新生成代码
$  hexo s  // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果

Hexo + Github搭建自己的博客_第4张图片
创建本地博客wsl.github.io

Hexo + Github搭建自己的博客_第5张图片
wsl.github.io

执行如下命令,生成静态页面至public目录,开启预览访问端口(默认端口4000,'ctrl + c'关闭server),打开浏览器访问 http://localhost:4000 预览默认博客主题效果

cd wsl.github.io  //进入博客目录
hexo clean  //清除缓存
hexo g  // hexo generate重新生成代码
hexo s  // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果

Hexo + Github搭建自己的博客_第6张图片
hexo generate
Hexo + Github搭建自己的博客_第7张图片
hexo server
默认的主题样式:http://localhost:4000

三、设置自己喜欢的博客主题

刚创建的博客默认使用的主题是landscape,不想用这个,咱换个
修改前,当然是先去获取你喜欢的主题了。主题集合。

  • 通过如下命令行来下载主题 或者手动前往 https://github.com/iissnan/hexo-theme-next 下载,下载完成之后放到wsl.github.io/themes目录下
cd wsl.github.io  //进入博客目录
git clone https://github.com/iissnan/hexo-theme-next themes/next
Hexo + Github搭建自己的博客_第8张图片
下载的next主题

注意:配置的文件内冒号:后面一定要有一个空格,否则无效,报错。

  • 博客配置:用文本编辑器打开wsl.github.io文件内的_config.yml文件,修改内部参数。
title: DoubleDragon's Blog
subtitle: Rome was not built in one day.
          Study hard and make progress every day.
description: ※ 微信公众号:iOS2679114653
             ※ QQ:1685527540
author: 且行且珍惜_iOS
language: zh-Hans

#改为true后,当创建文章后,会自动一并创建一个同名的文件夹当做图片文件夹
post_asset_folder: true

#设置主题
theme: next
deploy:
  type: git
  repository: https://github.com/wsl2ls/Wsl2Ls.github.io.git
  brachanc: master
#这一行需要自己加,为博客头像
avatar: "https://upload.jianshu.io/collections/images/1661007/艾玛·沃特森.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
  • 主题配置:用文本编辑器打开wsl.github.io/themes/next目录下的_config.yml文件,修改内部参数。
    参数说明以及详细的设置情况可以看官方文档:http://theme-next.iissnan.com/getting-started.html

  • 配置完成之后,通过如下命令后预览博客:

cd wsl.github.io  //进入博客目录
hexo clean  //清除缓存
hexo g  // hexo generate重新生成代码
hexo s  // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果

Hexo + Github搭建自己的博客_第9张图片
效果预览

四、将本地博客部署到Github

1、创建一个新项目Wsl2Ls.github.io,项目名必须为: 用户名.github.io
Hexo + Github搭建自己的博客_第10张图片
新建一个仓库
2、点击设置, 创建一个page,随便选择一个主题,我们马上就用自己本地的主题把它覆盖掉。
Hexo + Github搭建自己的博客_第11张图片
创建一个page
3、将我们Hexo的代码部署到github上
  • 首先用文本编辑器打开wsl.github.io文件内的_config.yml文件,修改博客内部参数,然后保存。
deploy:
  type: git
  repository: https://github.com/wsl2ls/Wsl2Ls.github.io.git  //同步到新建的项目
  brachanc: master
  • 通过命令部署到github上
npm install hexo-deployer-git --save  //先装个插件压压惊
hexo d  //  hexo deploy 部署的命令,发布到Github
Hexo + Github搭建自己的博客_第12张图片
Wsl2Ls.github.io项目
4、部署完成之后,打开浏览器访问 https://wsl2ls.github.io 查看效果。

五、新建博客文章

本地博客环境都配置完成了,接下来就是新建文章了,用命令 :hexo new "name",在wsl.github.io/source/_posts目录下生成 name.md文件,这个文件支持Markdown语法。
name.md文件打开之后 ,你的文章格式如下图所示,才能正确的显示时间,标题,分类等。当然如果你不需要这些东西,也可以不设置。

Hexo + Github搭建自己的博客_第13张图片
新建文章

文章写完之后, 通过如下命令后,打开浏览器访问 localhost:4000预览博客:

cd wsl.github.io  //进入博客目录
hexo clean  //清除缓存
hexo g  // hexo generate 生成静态页面至public目录
hexo s  // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果

预览没问题之后,就可以发布了。

hexo d  //  hexo deploy 部署的命令,发布到Github

六、接入Gitment评论系统

这里我选择接入Gitment,当然你也可以官方文档 http://theme-next.iissnan.com/third-party-services.html 接入其它三方评论系统。

Gitment的接入方法和步骤,直接看Gitment的开源大神https://imsun.net/posts/gitment-introduction/的介绍。

参考资料:
https://blog.csdn.net/Hoshea_chx/article/details/78826689
https://www.jianshu.com/p/8681ab76da08
https://www.cnblogs.com/sqlsec/p/hexo.html
https://www.jianshu.com/p/57afa4844aaa
https://imsun.net/posts/gitment-introduction/

Hexo + Github搭建自己的博客_第14张图片
赞个.gif

你可能感兴趣的:(Hexo + Github搭建自己的博客)