使用Hexo+github搭建个人博客

前端从入门到忘完 专栏收录该内容
1 篇文章 0 订阅

很早以前就想搭建个个人博客,可惜我只是个Android切图仔,目前也自学了后台,但是写前端页面写的贼垃圾,自己写不知道要写到猴年马月,群友介绍发现了可以使用Hexo搭建个人博客,而且托管在github平台,后面准备迁移到自己的服务器,先记录一下搭建Hexo个人博客的步骤~
废话不多说,老规矩先上图:( 美哭了😭 )
在这里插入图片描述
一:首先你要有个GitHub账号,然后在GitHub上面新建一个仓库,用来放自己的博客代码

1:新建一个仓库
创建一个和你用户名相同的仓库,后面加.github.io后缀(必须是你的用户名,其它名称无效),点击create respository按钮创建。

在这里插入图片描述
2:安装git工具,设置全局git用户信息

安装git工具这里就不多说了,安装完成之后,在桌面上git bash进入命令行,输入GitHub用户名和邮箱验证。

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱名"

查看输入是否正确

git config user.name
git config user.email

3:然后创建SSH,一路回车,生成SSH添加到GitHub (为什么要配置SSH呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。)

ssh-keygen -t rsa -C "你的邮箱名"

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入项目的仓库settings->Deploy keys->Add new下粘贴:在这里插入图片描述

在这里插入图片描述
二:Hexo搭建个人博客-框架的本地安装和运行

1:Hexo的官网 https://hexo.io/
github: https://github.com/hexojs/hexo

2:安装node 和npm
hexo基于node.js,本地需要安装node 和npm,安装步骤就不多说了
查看一下是否有版本号,有的话则安装成功。

yyptdeiMac:~ epay$ node -v
v12.12.0
yyptdeiMac:~ epay$ npm -v
6.11.3

3.安装hexo

$ npm install -g hexo

4:初始化一个项目(会生成一个blog文件夹)

$ hexo  init blog

5:进入项目文件夹,安装依赖文件

cd blog
npm install

6:运行,并且在浏览器打开网址: http://localhost:4000 ,就可以看到博客页面了

hexo server

在这里插入图片描述
三:更换Blog主题

1:主题这一块可以选择自己喜欢的,以下是以一个 Shoka 主题为例,这里有很多主题可以选择:传送门:https://hexo.io/themes/。比如选一个主题:https://github.com/amehime/hexo-theme-shoka,打开链接,进入到GitHub里面,有详细的安装教程。在这里插入图片描述
2:安装主题命令输入

blog> git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

3:打开_config.yml文件夹,更改主题名字 (注意:是)
在这里插入图片描述
4:正常情况 再次启动,访问网址 http://localhost:4000 ,就可以看到更换的主题了。

hexo server

5:可是我遇到的是这么个异常情况:

Error 'Function yaml.' + from + ' is removed in js-yaml 4. ' +
      'Use yaml.' + to + ' instead, which is now safe by default.');

6:解决问题 根据位置提示发现在node_moudles/js-yaml/index.js中的方法中有这么一段代码,然后删了不报错了:
在这里插入图片描述
7.然后还是有问题,然后根据Theme中的配置页面来
在这里插入图片描述
四. 部署到github

1:在配置文件里面填写仓库地址
在项目里面找到 _congif.yml文件,找到 deploy 字段,把以下代码放进去,填写第一步新建的仓库地址。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:你的名称/你的仓库名称.github.io.git
  branch: master

2:安装一个推送工具,将本地项目推到仓库上。

npm install hexo-deployer-git --save

3:hexo clean 清除之前生成的文件 hexo generate 生成静态文件,可以用 hexo g缩写,成功了之后可以看到生成了public文件夹

hexo clean
hexo g

4: 部署

hexo deploy

注意这里需要输入GitHub用户名和密码

5:查看仓库,已经将项目放在仓库里面了
在这里插入图片描述
这个时候就可以访问地址:https://mrrightdongyujie1314.github.io/

6.修改博客的基本配置
可以参考这篇文章:Shoka主题博客的基本配置

  • 3
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

小翘_上海

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值