为了账号安全,请及时绑定邮箱和手机立即绑定

Hexo + vscode + github pages 搭建属于自己的博客

2019.09.01 16:18 3204浏览

1 Hexo + vscode + github pages 搭建属于自己的博客

Hexo 是高效的静态站点生成框架,它基于 Node.js。通过 Hexo,你可以直接使用 Markdown 语法来撰写博客。本文搭建的环境是 Windows10。

安装 Node.js

首先下载稳定版 Node.js:https://nodejs.org/en/download/
安装选项全部默认,一路点击 Next

在 Windows PowerShell 中输入:

$ node -v
$ npm -v

如果没有报错,便说明安装成功。

安装 Git 与 vscode

为了把本地的网页文件上传到 github 上面去,我们需要用到分布式版本控制工具:Git下载地址。安装选项还是全部默认,只不过最后一步添加路径时选择 Use Git from the Windows Command Prompt,这样我们就可以直接在命令提示符里打开 git 了。安装完成后在命令提示符中输入 git --version 验证是否安装成功。

vscode 的安装便比较简单,直接按照提示安装即可。

创建 GitHub Pages

在你的 GitHub 主页打开如下界面:

创建 repo

然后如下图所示,输入自己的项目名字,后面一定要加 .github.io 后缀,README初始化也要勾上。名称一定要和你的github名字完全一样,比如你 github 名字叫abc,那么仓库名字一定要是 abc.github.io

然后项目就建成了,点击 Settings,向下拉到最后有个 GitHub Pages,点击 Choose a theme 选择一个主题。将 GitHub Pages 生成的网址复制到如下位置:

点击网址 https://xinetzone.github.io/,便会显示:

此页面的内容是由 xinetzone/xinetzone.github.io 根目录的 README.md 提供的。

使用 vscode 打开本地的一个文件夹:

选择 Git Bash 作为默认:


为了提高 npm 运行速度需要添加淘宝源:

 $ npm config set registry https://registry.npm.taobao.org

运行如下命令安装 hexo:

$ npm i hexo-cli -g

安装完后输入 hexo -v 验证是否安装成功。将你在 GitHub 上的 reop 克隆至本地,并切换到 hexo 分支(用于存放网站的源代码):

$ git clone https://github.com/xinetzone/xinetzone.github.io.git
$ cd xinetzone.github.io/
$ git checkout hexo

创建一个目录用于存储博客文件,切换目录并初始化网站:

$ mkdir docs
$ cd docs/
$ hexo init
$ npm install

其中 hexo init 为网站初始化环境,npm install 安装必备的组件,我们可以看到 blog 目录下生成如下目录:

  • node_modules: 依赖包
  • public:存放生成的页面,运行 hexo g 便会生成,而 hexo clean 便会删除
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

这样本地的网站配置也弄好啦,输入 hexo g 生成静态网页,然后输入 hexo s (hexo serve)打开本地服务器:

这样便可以在 http://localhost:4000 预览网站了:

使用 Ctrl + C 可以把服务关掉。

将 hexo 与 github 关联起来

首先输入如下命令,配置 Git 的环境:

$ git config --global user.name  xinetzone
$ git config --global user.email xinzone@outlook.com

用户名和邮箱根据你注册 github 的信息自行修改。然后生成密钥 SSH key:

$ ssh-keygen -t rsa -C "xinzone@outlook.com"

查看 id_rsa.pub

$ cat ~/.ssh/id_rsa.pub

打开你自己的 github,在头像下面点击 settings,再点击 SSH and GPG keys,新建一个SSH,名字随便,然后将 id_rsa.pub 复制粘贴到指定位置。在 git bash中,查看是否成功:

$ ssh -T git@github.com

打开博客根目录下的 _config.yml 文件,这是博客的配置文件,在这里你可以修改与博客相关的各种信息。

将 hexo 部署到 GitHub 修改最后一行的配置:

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

其中 repository 可以通过如下方法获取:

repository

repository 修改为你自己的 github 项目地址。接着需要先安装 deploy-git,也就是部署的命令,这样你才能用命令部署到 GitHub。接着 hexo clean 清除了你之前生成的东西,也可以不加。 hexo g 顾名思义,生成静态文章是 hexo generate 的缩写 hexo deploy 部署文章,可以用 hexo d 缩写:

$ npm install hexo-deployer-git --save
$ hexo clean | hexo g | hexo d

这时打开你的 github.io(https://xinetzone.github.io/) 主页就能看到发布的文章:

为了添加博客,需要:

$ hexo new post "博客名"

然后打开 blog\source\_posts 的目录,可以发现下面多了一个文件夹和一个 .md 文件,一个用来存放你的图片等数据,另一个就是你的文章文件啦。

备份博客源文件

将本地的 hexo 分支推送到远程:

$ git add .
$ git commit -m "hexo init"
$ git push origin hexo
点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消