Mac搭建github Page的Hexo免费个人博客

墨蓝 2023-08-17 16:14 74阅读 0赞

## 1.基础准备 ##

1.  github账号
2.  安装git
3.  安装node.js、npm

## 2.创建repo ##

![1257266-20190924210542746-2052145656.png][]

## 3.配置SSH key ##

这一步并不重要，配置SSH key与否，并不影响博客的搭建和使用，只是配置了之后，更新博客方便一点，不用每次都输用户名和密码。

*  打开终端，输入如下命令

cd .ssh
    ls -la

检查终端输出的文件列表中是否已经存在id\_rsa.pub 或 id\_dsa.pub 文件，如果文件已经存在，那么你可以跳过步骤

*  �创建SSH key  
    `$ ssh-keygen -t rsa -C "your_email@example.com"`  
    注：此处邮箱为注册github账号的邮箱  
    回车，接着会提示你，让你输入文件名，直接回车会创建使用默认文件名的文件（推荐使用默认文件名）；  
    然后会提示你输入两次密码（输入密码之后没有反馈，显示还是空白，但是你确实已经输入了），当然密码也可以不输，直接回车，如果这里没有输入密码，以后提交博客更新的时候就不需要输入密码了。
 *  添加SSH key到github  
    经过第二步，如果你没有指定文件名（也就是使用的默认文件名），那么你的.ssh文件夹下，应该有一个id\_rsa.pub文件了，打开该文件，复制里面的文本。  
    然后登陆github，点击右上角头像右边的三角图标，点击Settings，然后在左边菜单栏点击SSH and GPG keys，点击new ssh key，title 随意填，在key 栏填入你复制的内容，点击add ssh key，就可以添加一个ssh key了。
 *  验证SSH key是否配置成功  
    终端输入：  
    `ssh -T git@github.com`  
    回车，你会看到如下回复，说明你的ssh key添加成功了。  
    Hi chenglaiyong! You’ve successfully authenticated, but GitHub does not provide shell access.  
    如果过程中提示你perimission deny相关错误，就在命令前加上sudo 然后执行命令的时候输入你的appleid密码应该就可以了。sudo用来说明用管理员权限运行。

## 4.安装Hexo ##

*  终端输入：  
    `npm install -g hexo`
 *  初始化，创建所需资源  
    新建任意名字文件夹，cd进入该文件夹后，执行如下命令

hexo init
    npm install

*  生成并发布

hexo g // 全拼是：hexo generate，可以简写成 hexo g hexo s // 全拼是：hexo server，可以简写成 hexo s

这样就开启了一个本地博客服务器，打开浏览器，在地址栏输入[http://localhost:4000][http_localhost_4000]，就可以查看本地博客了，hexo默认生成了一片hello world博客。  
注：以上hexo开头的命令，执行目录必须是你创建的博客文件夹目录，因为只有在那个文件夹下才有创建和发布hexo的所有资源。

## 5.同步Hexo到Github ##

*  安装  
    `npm install hexo-deployer-git --save`
 *  打开本地博客目录的\_config.yml文件，编辑其中的deploy节点

deploy: type: git repository: https://github.com/chenglaiyong/chenglaiyong.github.io.git branch: master

注：“: ”后面的空格，这是个坑  
repository地址从下图中即可获取

url.jpeg

保存即可  
当然可以使用SSH地址作为repository地址，点击右上角Use SSH，之后操作相同。

*  生成和发布

hexo clean // clean本地项目，防止缓存 hexo g // 根据你编辑的md格式的博客，生成静态网页 hexo d // 将本地博客发布到github

然后，在浏览器地址栏输入yourusername.github.io就可以访问你的博客了，别人也可以通过这个地址访问你的博客。

## 6.Hexo常用命令行 ##

hexo init //在指定目录执行该命令，会将当前目录初始化为hexo站点，生成hexo站点所需的一切文件 hexo new “my new blog title” //新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。 hexo clean // 清除缓存，如果对本地文件做了修改，同步到远程验证修改的效果之前，先clean，清除缓存 hexo generate // 可以简写成hexo g 根据markdown文件生成静态文件 hexo server // 或者简写成hexo s 启动本地hexo 服务器，默认localhost:4000可以访问 hexo deploy // 或者简写成hexo d 将本地修改，部署到远端 hexo version // 显示hexo版本

## 7.其他常用操作 ##

*  新建博文  
    `hexo new "the title of your blog"`  
    建议学习 [写作 | Hexo][_ Hexo]
 *  删除博文  
    删除自动生成的hello world  
    找到/source/\_posts文件夹，里面放了所有我们写的博客，想删除哪篇，直接在这里删除，然后再重新发布到github，这篇博文就不见了
 *  给博文添加tag和分类  
    创建的新博文文件，打开之后顶部会有一段自动生成的文本，在其中加入tag和category标签即可指定tag和分类。

*  Hexo文章中插入图片 [如何在Hexo文章中插入图片 | Bejond IO][Hexo_ _ Bejond IO]

1.  编辑\_config.yml  
    post\_asset\_folder: true  
    这样hexo会在每次使用hexo new title命令时在文章源文件目录下创建同名文件夹来存储资源.
2.  实现

![webp][]

photo.jpeg

markdown中引用这么写：

{% asset_img newRepository.png 创建repository%}

asset\_img 表示要引用图片, newRepository.png是标题, 后面的是图片显示的标题和悬浮时的提示。

## 8.安装Theme ##

1.  终端cd到hexo所在文件夹执行如下命令：  
    `git clone https://github.com/iissnan/hexo-theme-next themes/next`
2.  将hexo目录下\_config.yml里theme的名称landscape修改为next，重新部署就可以了。
3.  fork me on github  
    如果你访问我的个人博客，你会发现右上角有一个倾斜的fork me on github 图标，想要集成这个图标，去这里挑选你喜欢的样式，把样式代码复制过来。  
    本地博客目录下的themes/next/layout/layout.swig文件，然后把你复制过来的样式代码粘贴到如下位置。

1.  可以选择其他主题[Themes | Hexo][Themes _ Hexo]，方法同上。

转载于:https://www.cnblogs.com/chenglaiyong/p/11581064.html

[1257266-20190924210542746-2052145656.png]: /images/20230810/b2840ceaa2aa472db83ff937d0324568.png
[http_localhost_4000]: https://link.jianshu.com/?t=http://localhost:4000
[_ Hexo]: https://link.jianshu.com/?t=https://hexo.io/zh-cn/docs/writing.html
[Hexo_ _ Bejond IO]: https://link.jianshu.com/?t=http://bejond.org/2016/03/23/%E5%A6%82%E4%BD%95%E5%9C%A8Hexo%E6%96%87%E7%AB%A0%E4%B8%AD%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87/
[webp]: /images/20230810/208bf2f4abd24abfb054d3e5a826fdd7.png
[Themes _ Hexo]: https://link.jianshu.com/?t=https://hexo.io/themes/