📚
如果您和我一样都是小白,那么恭喜您!看完这篇文章,您也可以拥有这样的一个博客

📰 前 言

本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处!


  

📰 准备工作

 1.  node.js 下载,并安装。请根据您的电脑系统下载相应的安装文件。

 2.  Git 下载,并安装。请根据您的电脑系统下载相应的安装文件。


📰 搭建环境

 1. 找一个自己感觉适合的磁盘或文件夹,右键鼠标选择Git Bash Here

 2. 安装Hexo:
   在命令行(即Git Bash)运行以下命令

1
$ npm install -g hexo-cli

 3. 初始化Hexo,在命令行(即Git Bash)依次运行以下命令

1
2
3
$ hexo init <folder>       //创建hexo初始化文件夹,<folder> 是你的文件夹名称
$ cd <folder> //进入hexo文件夹
$ npm install //安装noje.js包管理器

 新建完成后,在路径下,会产生这些文件和文件夹:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

 注:
   ◈ hexo相关命令均在站点目录下(即Hexo文件夹下),用Git Bash运行。
   ◈ 站点配置文件:站点目录下的_config.yml
     路径为<folder>\_config.yml。 
   ◈ 主题配置文件:站点目录下的themes文件夹下,主题文件夹下的_config.yml
     路径为<folder>\themes\<主题文件夹>\_config.yml

 4. 启动本地服务器。在Hexo路径下,命令行(即Git Bash)输入以下命令

1
hexo server   或   hexo s

 5. 浏览器访问地址:http://localhost:4000
   至此,您的Hexo博客已经搭建在本地。


📰 方案实施

🔗 githubPages

 1. 创建Github账号。

 2. 创建仓库,仓库名为<Github用户名>.github.io,交且一定要勾选Initialize this repository with a README,在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你将会惊奇的发现该项目已经被部署到网络上,能够通过外网来访问它。

 3. 将本地Hexo博客推送到GithubPages

  3.1. 安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令

1
$ npm install hexo-deployer-git --save

  3.2. 将HexoGithub page联系起来,设置Git的user nameemail

1
2
$ git config --global user.name "你的名字"
$ git config --global user.email "你的邮箱"

  3.3. 添加SSH key

   ◈ 创建一个 SSH key。在命令行(即Git Bash)输入以下命令。回车三下即可:

1
$ ssh-keygen -t rsa -C "邮箱地址"

   ◈ 添加到 github。 复制密钥文件内容(路径形如C:\Users\Administrator.ssh\id_rsa.pub),粘贴到 New SSH key 即可。

   ◈ 测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You’ve successfully authenticated”即成功:

1
2
$ ssh -T git@github.com
$ yes

  3.3. 修改_config.yml(在站点目录下)。文件末尾修改为:

1
2
3
4
deploy:
type: git
repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
branch: master

  注:上面的仓库地址写ssh地址,不写http地址。

  3.5. 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令,返回INFO Deploy done: git即成功推送:

1
2
$ hexo g 
$ hexo d

 4. 等待1分钟左右,浏览器访问网址:https://<Github账号名称>.github.io

 至此,您的Hexo博客已经搭建在GithubPages,域名为https://<Github账号名称>.github.io

🔗 githubPages + 域名

 在githubpages的基础上,添加自定义域名(您购买的域名)。

 1. 域名解析。

   1.1. 类型选择为 CNAME; 
   1.2. 主机记录即域名前缀,填写为www; 
   1.3. 记录值填写为<Github账号名称>.github.io; 
   1.4. 解析线路,TTL 默认即可。

 2. 仓库设置。

  2.1. 打开博客仓库设置:https://github.com/<Github账号名称>/<Github账号名称>.github.io/settings
  2.1. 在Custom domain下,填写自定义域名,点击save。 
  2.3. 在站点目录的source文件夹下,创建并打开CNAME.txt,写入你的域名(如www.yydds.cc),保存,并重命名为CNAME(不需要文件扩展名)。 

 3. 等待10分钟左右。
   浏览器访问自定义域名。
   至此,您的Hexo博客已经解析到自定义域名,https://<Github账号名称>.github.io依然可用。

📰 主 题

 

🔗 主题安装

 1. 在Hexo官网选择您喜欢的主题并下载。
 2. 将下载好的主题文件夹,粘贴到站点目录的themes下。
 3. 更改站点配置文件_config.ymltheme字段,为主题文件夹的名称:

1
theme: <主题文件夹的名称>

  

🔗 本主题

 1. 本主题地址。 
 2. 本主题使用说明


◈ 本文到此结束,感谢您的耐心,希望本文对您有所帮助 ◈
相关文章
评论
分享
  • 为博客添加加密功能

    输入密码查看文章内容,博客密码:password Incorrect Password! No content to display! U2FsdGVkX1/NC2NLaftzBFnbYUU8...

    为博客添加加密功能
  • 动态网页标签

    📰 操作步骤  1. 打开 header.ejs,位置blog\themes\Annie\layout\_partial\header.ejs。     2. 复制以下代码到header.ejs文件内</header&g...

    动态网页标签
  • 关于本博客新增加的那些插件

    📰 看板娘🔗 方案一  在网络上普遍看到添加看板娘的方式都需要自己动手引入模型文件,对于我等萌新苦手来说还是有点麻烦的,但还是推荐大家自己动手试试。   想自己手动引入的小伙伴们推荐大家观看此视频 此视频由一位名叫 hoju...

    关于本博客新增加的那些插件
  • 友情链接

    🍊 在这里留下你的友情链接吧,格式: 名称: 咸鱼博客头像: https://cdn.jsdelivr.net/gh/yydds/cdn@master/logo.png链接: https://www.yydds.cc描述: ...

    友情链接