文章目录

一、前提
- 1.1 安装hexo
- 1.2 初始化hexo
- 1.3 hexo的一些命令
- 1.4 关于主题
- - 1.4.1 修改主题
二、搭建github博客
- 2.1注册一个域名
三、配置ssh key
- 3.1 测试是否成功
四、部署到github中
五、写博客
六、创建页面
- 6.1 创建分类页面
- 6.2 创建标签页面同理
七、解决某些问题

myBlog

一、前提

计算机已经安装了node.js、npm、git
已有github账号
命令都用 git bash 完成

1.1 安装hexo

$ npm install -g hexo

1.2 初始化hexo

在电脑的某个盘建一个hexo(名字任意)文件夹，比如我建立的位置是：F:\workspaces\hexo

$ cd /e/workspaces/hexo/
$ hexo init

hexo会自动下载一些文件和目录在这个hexo里面。比如：

1.3 hexo的一些命令

hexo clean
hexo g 生成

执行这个命令，hexo就会在public文件夹生成html文件，这些文件都是将来要部署到github上去的。

hexo s 启动服务

是开启本地预览，打开浏览器访问 localhost:4000 既可以看到要部署到github的内容

hexo d 上传到github
hexo s -g 生成并本地预览
hexo d -g 生成并上传

1.4 关于主题

部署好之后直接打开的是hexo默认主题

1.4.1 修改主题

首先进入到hexo的根目录
cd /e/workspaces/hexo/
运用git clone 下载你喜欢的主题比如：yilia主题
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
下载后的主题在 hexo根目录下的 themes 中
修改hexo根下的 _config.yml文件中的 theme: landscape 改为 theme: yilia 然后执行 hexo clean 清理一下public的内容然后执行 hexo g 重新生成， hexo s 可以在4000端口查看是否修改成功

二、搭建github博客

新建一个 username.github.io的仓库，比如我的username是luer9，那么我就建一个luer9.github.io的仓库即可，搭建好之后访问博客的地址就是https://luer9.github.io

2.1注册一个域名

如果你喜欢直接用这个 username.github.io 来访问网址的话，也可以
如果注册域名的话
1. 买域名
2. 解析域名
  - 在域名解析配置中添加CNAME和A记录
  - CNAME填写域名，A写IP
  - 如果得到IP，用ping命令评一下你的 username.github.io 即可

我是在阿里买的域名，本人资金有限，便宜就好啦~

状态正常就可以证明解析没问题

在你安装hexo的根目录下找source创建一个CNAME文件，没有任何后缀名，里面写上你买的域名，比如：www.luery.xyz，加不加www都可以，但最好是加吧。

三、配置ssh key

因为提交代码给github肯定要拥有github的权限，ssh key 用来解决本地和服务器的连接问题

打开你的 git bash
输入 ssh-keygen -t rsa -C "邮件地址" 这个邮箱地址是github绑定的邮箱地址。比如我的是：ssh-keygen -t rsa -C “1302750721@163.com”
连续按三次回车，最终会生成一个文件在用户目录下，打开用户目录，注意是用户目录！！在C盘的 user （用户）里！！，找到 .ssh\id_rea.pub文件，用记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key -> 复制内容粘贴到key里面，title随便填，保存即可。

3.1 测试是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

You've successfully authenticated, but GitHub does not provide shell access.这种类似成功的单词。但是后面还有but

此时我们需要配置：

$ git config --global user.name "username"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@163.com"// 填写你的github注册邮箱

四、部署到github中

配置 _config.yml有关deploy的部分

deploy:type: gitrepository: git@github.com:luer9/luer9.github.io.gitbranch: master

执行 hexo d ，可能会报错因为需要安装一个插件 npm install hexo-deployer-git --save
然后再执行 hexo d 或者(hexo clean -> hexo g -> hexo d)
最后出现 INFO Deploy done：git 说明部署成功

五、写博客

前提是在hexo的根目录！！！！

执行

hexo new 'hello hexo'

会在 source下面的_posts文件里生成相关md文件，打开就可以编辑咯~

六、创建页面

6.1 创建分类页面

创建分类页面的命令是：

hexo new page categories

会生成一个index.html文件

编辑这个文件 type里面就可以加 categories
修改**主题！！！**下面的 _config.yml文件，定位到menu中添加分类导航

menu:Home: /categories: /categories

6.2 创建标签页面同理

七、解决某些问题

图片不能显示问题
- 在hexo根文件下找_config.yml中的post_asset_folder，把这个选项从false改成true
- 在hexo根目录下打开 git bash 执行一个下载上传图片插件的命令 npm install hexo-asset-image --save
- 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面
- 插入图片方式：
  - {% asset_img slug [title] %}
  - ![例子](例子.png) —>本人常用

*Npm WARING

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

因为操作系统的不同，这只是警告，可以忽略。关注警告下面的文字即可。

基于Hexo和Github搭建博客相关推荐

使用 Hexo 创建 GitHub Page 博客(一)
CSDN GitHub Hexo 使用 Hexo 创建 GitHub Page 博客(一) AderXCoding/blob/master/system/tools/hexo/01-use_hexo ...
使用Hexo和Github搭建博客站
本人电脑系统为window 10专业工作站版,64位相关步骤: 1.安装Node.js和配置好Node.js环境,打开cmd命令行,成功界面如下 2.安装Git和配置好Git环境,安装成功的象征就是 ...
2 - Hexo + GitHub 搭建博客
使用 Hexo + GitHub 搭建一个好看的博客一.第一篇博客 1 cd ~/Desktop 2 在 GitHub 上新建一个空 repo,repo 名称是「你的用户名.github.io」 3 ...
hexo+github搭建博客(超级详细版，精细入微)
转载此文章前,请先联系作者,经作者同意后再转载,并请注明原文链接和作者,整理这些不容易,最终版权归作者所有,谢谢合作!移步我的个人博客:https://yafine-blog.cn,阅读体验更佳前言 ...
利用Hexo+github搭建博客，零成本、无需域名、服务器
之前的博客是用wordpress搭建在阿里云的一台虚拟机上,由于出了个意外,造成我在上面写的文章全部丢失了,虽然不多,但是也都是心血.吸取教训我打算换种方式搭建博客,分析了目前比较流行的博客框架gho ...
win10系统用hexo+GitHub搭建博客遇到的坑
1.repo配置报错网上很多搭建博客经验分享帖中repo配置写入的是HTTPS(形如:https://.github.com/ /. github. io. git格式).win10系统运行会报错. ...
Hexo+GitHub搭建博客
拾柒的博客 Hexo美化: Hexo博客优化之Next主题美化 hexo的next主题个性化教程:打造炫酷网站 hexo页脚添加访客人数和总访问量 Hexo搭建的博客如何给文章分类(next主题) 文 ...
hexo最全搭建博客教程
目录前言入门安装 Node.js 安装 Git 检验Git是否安装成功安装Hexo Hexo 初始化配置本地查看效果将博客部署到 Gitee Pages 上注册 Gitee 账户创建项 ...
hexo建立github,gitcafe博客并实时同步的要点
把hexo博客的源码和生成的页面实时同步到github和gitcafe. 用搜索引擎搜索"github 博客"等关键字会出现大量很好的文章教小白一步步搭建.我这里列出一些关键点,希 ...

基于Hexo和Github搭建博客