如何在coding上用HEXO搭建个人博客

最新推荐文章于 2024-07-04 20:08:44 发布

summerwaiting

最新推荐文章于 2024-07-04 20:08:44 发布

阅读量448

点赞数

文章标签： HEXO coding help

本文链接：https://blog.csdn.net/summerwaiting/article/details/55048575

版权

如何在coding上用HEXO搭建个人博客

一.准备工具

1.Git

Windows：下载并安装 git.
Mac：使用 Homebrew, MacPorts ：brew install git;或下载安装程序安装。
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core
- Mac 用户
  您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。
- Windows 用户
  由于众所周知的原因，从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

2.Node.js

安装 Node.js 的最佳方式是使用 nvm。

cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载安装程序来安装
- Windows 用户
  对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
  另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用 Git Bash来进行操作。

3.Coding

Coding可以说，就是国产的Github，但是，有一个功能使它似乎超越了GitHub，那就是 Web IDE。

Coding WebIDE 是 Coding 自主研发的在线集成开发环境 (IDE)。用户可以通过 WebIDE 创建项目的工作空间, 进行在线开发, 调试等操作。同时 WebIDE 集成了 Git 代码版本控制, 用户可以选择 Coding、GitHub、BitBucket、Git@OSC 等任意的代码仓库。 WebIDE 还提供了分享开发环境的功能, 用户可以保存当前的开发环境, 分享给团队的其他成员。

摘抄自 Coding WebIDE官网

二.步骤

创建项目
你需要在 Coding 上面新建一个项目，项目名称一定要是* 用户名.coding.me*,因为hexo只能弄在根目录上，这样它内置的文件引用目录才能都正确。
填写项目名称、描述、设置属性、初始化文件，最后点击“创建项目”
接着，我们传送到Coding WebIDE，单击“+ 新建工作空间”。
随后，单击“同步仓库”，等待同步仓库完成。
- webIDE是部分收费的，但是不用着急，官方提供了一些方式免费获得其网站虚拟币——码币，且Coding在注册后会送给用户一些码币，足以让IDE跑起来啦
言归正传，我们创建IDE。配置不变，直接鼠标拉到最底下，单击“创建”，这时候，空间创建完毕，点开创建完成的工作空间。
Hexo是基于Nodejs的，所以我们将右侧“运行环境”切换为Nodejs。单击“使用”后，再单击确定。下面，我们单击左下方“终端”来打开终端
进入正式安装步骤，首先，我们在终端中输入
sudo npm install -g hexo-cli

安装进程，就会全自动完成。安装结果如下图，安装就成功了
接着，我们创建一个文件夹用于存放文章与设置。
mkdir hexo
然后，使用init命令初始化博客。
cd hexo
sudo hexo init
初始化进程需要安装一些辅助插件，所以比安装的时候慢，需要耐心等待…等待初始化进程完成后，安装进程就正式完成啦~
我们首先先解锁一下配置文件（将所有文件提权至777）
sudo chmod -R 777 *
接着，我们可以暂时关闭终端，编辑一下博客的设置,依次打开文件树中的目录：项目名->hexo->_config.yml 这时，我们就可以在编辑窗口中编辑属性：
title为标题，subtitle小标题【可不填】，author作者，language语言【可不填】，timezone时区【可不填】。
我做了如下修改:
# Site title: SUMMER subtitle: summer`s blog description: welcome to my blog author: summer language: timezone:
修改完成之后别忘了保存。CTRL+S保存
接着我们可以使用以下命令来开启本地服务器：
hexo server
然后，我们就可以通过单击右上角的访问链接，将端口设置为4000来访问网站。
测试成功了，那么我们先在终端中按Ctrl+C退出，然后按下访问链接中的垃圾桶来销毁端口。那么大家刚才也看到了，IDE中的访问链接是测试用途，而且有时间限制，一看就非常不严谨，所以，我们要学会把博客Push到托管平台中。那么首先，我们要安装Hexo Git插件才可以将静态页推送到托管平台上。
sudo npm install hexo-deployer-git --save

安装完成之后，我们配置一下_config.yml文件。修改一下最下面的deploy：

deploy:
type: git  
repo: [仓库地址]
branch: master
message: blog update

注：仓库地址可以在您的项目主页找到。这里写图片描述

我填入了repo：

deploy:

#我们是使用 git 来部署的。

type: git

# git仓库的地址。

repo: https://summerwait:summer786637@git.coding.net/summerwait/summerwait.coding.me.git

# 分支名称。

branch: master
message: blog update

随后，我们就可以将博客推送到代码托管平台了，在终端中使用这个命令：
sudo hexo deploy

和往常的推送操作一样，终端会要求用户输入用户名与密码。
推送成功
下面，我们开启静态页服务（Pages）。

只需要单击页面上的“Pages服务”，设置部署来源为master分支，然后单击“保存”，就可以访问啦！现在去访问试试吧。这里是我的地址，欢迎来访~