搭建个人博客

发表于 | 更新于: | 分类于 |
字数统计: 1,112 | 阅读时长 ≈ 4

本文引用于 gdutxiaoxu的Hexo+GitHub搭建个人博客 少做修改作为学习记录。

记录今日搭建博客流程和遇到的问题

  • 安装、配置Hexo
  • 将Hexo与github page关联
  • 发布文章
  • 主题
  • 添加sitemap和feed插件

安装、配置Hexo

根据Windows版本选择相应的安装文件（右键‘我的电脑’属性中查看）。下载完成后默认安装就可以，放置路径可以自行修改。安装结束后同时按下Win+R打开运行窗口，键入cmd后点击确定按钮。在打开的窗口中输入

node -v
npm -v

得到的结果若如下图所示，则说明安装成功



Git官网下载地址，Git的安装过程同样保持默认就可以，安装路径可以自行修改。安装完成后Win+R打开命令行，输入

git --version

得到结果如下图则代表正确


GitHub账户注册与配置

Git方面博主也是新手，这里不再过多阐述。可以参考廖雪峰的Git教程自行学习，写的非常非常好

在完成注册之后创建代码库，如图所示



在创建代码库页面中，Repository name表单中填写yourname.github.io，Description(optional)选填。如图所示



我的名字是liyachuan,所以我在此处填写liyachuan.github.io。填写完成后点击创建代码库按钮级进行提交。在创建成功后的页面上面的tap中选择settings，下拉至GitHub Pages。若如下图所示则说明该功能开启。没有的话请百度一下，因为我创建的时候GitHub就自动配置了，我没有配置过（尴尬）。

安装Hexo

接下来创建一个文件夹（位置随意），我创建在了D盘下，名称为hexo。从命令行进入该目录，然后输入

npm install hexo-cli -g

结果如图所示（我已安装过，就不再执行，这里引用一下我学习的博客中展示的图片）



出现一个WARN不必过虑，不会影响正常使用，继续输入

npm install hexo --save

在命令行刷过一堆白字后，接下来验证是否已经安装成功，输入

hexo -v



如图所示，则代表安装成功，然后再安装一个拓展

npm install hexo-deployer-git --save

配置Hexo

接下来初始化Hexo，输入

hexo init
npm install

接下里npm会自动安装需要的组建，只需等待npm操作即可。完成后继续输入

hexo g



提示：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

打开浏览器在地址栏输入http://localhost:4000，打开后



若如图中所示，则说明Hexo在本地已经配置结束。

关联Hexo和GitHub page

配置Git个人信息

  1. 设置Git的user name和email（若之前已经配置过则可以跳过）
git config --global user.name "your name"
git config --global user.email "your email"
  1. 生成密钥
ssh-keygen -t rsa -C "your email"

将生成的密钥添加到GitHub账户的SSH keys中，具体操作参考 gdutxiaoxu的Git ssh 配置及使用

配置Deployment

在你刚才创建安装hexo的目录下找到_config.yml文件，打开找到Deployment，然后如下修改

deploy:
    type: git
    repo: git@github.com:yourname/yourname.github.io.git
    branch: master

编写博客、发布文章

新建一篇博客，执行命令

hexo new post "Test"

回车执行后会提示

INFO Created:安装目录\source_posts\test.md

然后用MarkDownPad2进行编辑就可以，文章编辑好后运行生成、部署命令

hexo g  //生成
hexo d  //部署
hexo d -g  //这是二合一，与上面两条命令结果相同

部署成功后访问地址 https://yourname.github.io 就可以看到结果啦！

主题

我现在用的是 https://github.com/iissnan/hexo-theme-next，里面有中文文档可以参阅，具体的样式设置、语言设置、新页面等都有说明。这里就不再多做记录，犯懒了。

添加插件

添加sutenao个feed插件，命令行进入安装hexo的目录，输入

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改_config.yml，增加一下内容

Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
feed:
type:atom
path: atom.xml
limit: 20
sitemap:
path: sitemap.xml

在执行一下命令，部署服务端

hexo d -g

配完之后，就可以访问 https://yourname.github.io/atom.xml 和 https://yourname.github.io/sitemap.xml ，发现这两个文件已经成功生成了。

------ 本文结束------
0%