github+hexo来搭建个人博客——保姆级教程

简介: github+hexo来搭建个人博客——保姆级教程
+关注继续查看

1. 在github创建仓库

  • 仓库名字一定是:用户名.github.io的模式,如我的用户名是hxd250,故该仓库名为 “hxd250.github.io” 。
  • b72e0f97bc0f050a9446358879f8cae0.png
  • 将 “Add a README file” 勾上,然后点击 “Create repository”

b937b8990f30ed297e9f330199450658.png

  • 创建成功后进入仓库主页,点击“setting”进入设置


b937b8990f30ed297e9f330199450658.png

  • 在最后面哪里点击Change theme选择主题

1aefc68c0588c592ee7407db409d609c.png


  • 任意选择一个主题,到此你的仓库就创建成功了!

  • b589ba725184c05983fba6343dec541d.png

2. 下载安装Git和node.js

  • git : 在官网下载很慢,可以使用阿里巴巴的镜像源下载,地址:

https://npm.taobao.org/mirrors/git-for-windows/, 选择最新的就好了。


git安装成功会在你的鼠标右键的列表中多出Git GUI here 和 Git Bash here


node.js : https://nodejs.org/zh-cn/download/, 根据你的系统选择就好了


在终端运行 node -v 和 npm -v ,安装node.js成功会显示:

31fda7ad9b2eeedd325536fbe23cdfa2.png

3. 安装hexo

  • 在你觉得适合的位置创建一个blog文件夹,进入该文件夹,右键点击Git Bash here,会进入如下界面:

4097a4639de32096c2c97ae8a8f60379.png

更新npm


换成阿里源:npm config set registry https://registry.npm.taobao.org


验证命令: npm config get registry //返回https://registry.npm.taobao.org, 说明镜像配置成功。

23b08a9d11f8e683b80c2245380a40dd.png

  • 使用 “npm m -g hexo" 命令来安装hexo主题

db27405ca6e945a19c00ad62bf4c5664.png


  • 使用 "hexo -v"来查看hexo是否安装成功,成功就会返回hexo的相关信息


ee808f4871a3ad463207fdedd0385924.png

  • 输入 “hexo init” 初始化文件夹,需要等好一会,最后会出现 “Start blogging with Hexo!" 字样。4c65d7826b3f9cbdfdbab5fa47ab59e0.png

  • 输入 npm install,安装所需组件


77c207e373ae74747ce6aa29a472adb2.png

  • 输入 “hexo g”

3f1019d29e60067333fbd7937e9149e0.png


  • 输入“hexo s” , 启动本地服务器,通过“http://localhost:4000”来访问


39eb8faded6e62c4d27fb89520e1b1d7.png

  • 成功界面如下:

image.png


  • 更换主题:

首先你要先找到你需要的主题,可以去百度或者github搜索hexo主题,找到你喜欢的主题,得到其github地址。如我找到的:https://github.com/Fechin/hexo-theme-diaspora.git


2a491c038852a4727afc1fe805975f57.png

在git终端输入:git clone + 你找到的主题的git地址 + themes/主题名, 来下载该主题。你下载的主题都会保存在themes文件夹内。如:git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora


8becdf09654dda547deea3410e698a8d.png

  • 上一步操作我们把主题下载好了,然后就得修改配置文件。
  • 4c969c2d7e4c865498c855d707ac635f.png

  • 在你创建的blog文件下有_config.yml文件,打开该文件,将里面的"theme: "后面接的主题修改为你下载的主题名。如:theme: diaspora

4. 部署到GitHub上

  • 使用Hexo deploy 部署到github
    • 编辑根目录(我们创建的blog目录)下_config.yml文件,翻到最后修改为代码(hxd250换成自己的用户名),并进行保存。注意:冒号和后面的内容有一个空格!


45bba3c74d2c649fb52357a9f5034d02.png

在git终端输入:npm install hexo-deployer-git --save 来安装Git部署插件

检查SSH Keys设置


在git终端输入cd ~/.ssh , 如果出现“bash: cd: /c…” 的错误,说明不存在.ssh


解决办法:


输入:ssh-keygen -t rsa -C “xxxxxxx”(自己邮箱),提示你输入时不用管,回车就完了

在输入 cd ~/.ssh 没有报错,说明成功了

输入eval “$(ssh-agent -s)” , 添加密匙到ssh-agent(以下两个操作可有可无)


e7072e0e0c756fb0177319fb9ecef2c3.png

    • 输入 ssh-add ~/.ssh/id_rsa , 添加生成的SSH key到ssh-agent


d838fea4a17667f465bbc92b000302ea.png

  • 添加SSH Key到GitHub
    • 进入你的主页设置(右上角):



8bf21b9b5110502fdb23ea56529d0943.png

  • 点击“SSH and GPG keys”,然后点击“New SSH key”新建SSH keys

a04ea9632182abddda54780276ef6a1f.png


  • 在终端输入cat id_rsa.pub , 复制显示出的所有文本



6b7230d6282d52cca4b73fb5a634909c.png


3ec6aece4675db1bb41313549c290ed4.png

输入ssh -T git@github.com,测试添加ssh是否成功。如果看到Hi后面是你的用户名,就说明成功了(有一个会让你输入 yes)


2841851d6a6dfe5d580b0234fc5b7610.png


设置账号信息,需要你的你的用户名和注册时使用的邮箱


d3998e8a18c92e7c1f3af67e11d1814a.png


部署到GitHub上,输入hexo d -g , 使用网址:https://你的用户名.github.io 访问博客。


32d43c9d9be1bd7347175e7691389555.png


好了,安装完毕了,如果想使用阿里云的ECS实例+hexo来搭建博客,请参考大神的博客:


https://zhuanlan.zhihu.com/p/126243913

https://blog.csdn.net/qq_44747221/article/details/105045390


目录
相关文章
|
1天前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
1月前
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
26 1
|
4月前
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
5月前
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
45 0
Hexo+GitHub搭建个人博客
|
5月前
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。
|
6月前
|
缓存 JavaScript 网络安全
使用Hexo在Github上搭建个人博客
使用Hexo在Github上搭建个人博客
73 0
|
7月前
|
JavaScript Shell 网络安全
在Windows环境下使用hexo搭建博客以及部署到gitee / github
在Windows环境下使用hexo搭建博客以及部署到gitee / github
106 0
|
8月前
|
JavaScript 网络协议 Shell
Hexo+GitHub+Vercel搭建个人博客网站
直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了
439 0
|
12月前
|
缓存 JavaScript Ubuntu
Hexo+GitHub Actions搭建博客,实现云端写作、一键发布
Hexo+GitHub Actions搭建博客,实现云端写作、一键发布
525 1
Hexo+GitHub Actions搭建博客,实现云端写作、一键发布
|
域名解析 前端开发 JavaScript
Hexo+Github+vercel 搭建个人博客教程(二)
这篇教程接上篇教程,在上篇教程的基础上在进行
847 1
相关产品
云迁移中心
推荐文章
更多