Hexo+github搭建个人博客(1):网站原型搭建

一. 简介以及环境准备：

• Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页
• github是免费的代码托管平台, 当用作个人静态页面显示时,建立的仓库名称必须是:用户名.github.io. 具体步骤请看其他文章介绍.
• 因为 Hexo 是基于 Node.js 驱动的一款博客框架，所以需要安装Node.js。
  • windows安装Node.js和npm： 在 https://nodejs.org/en/ 中下载Node.js,安装完成后,在cmd中输入node -v 查看是否安装成功
  • windows安装Hexo: 在cmd中输入:npm install -g hexo-cli
    s

    二. Hexo生成以及本地预览

    2.1 创建博客目录:

    创建指定的 myBlog 文件夹并新建博客所需文件

    mkdir myBlog
    hexo init 
    cd myBlog
    npm install

    新建完成后，指定文件夹的目录结构如下：

    .
    ├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
    ├── package.json
    ├── scaffolds 	# 模版文件夹
    ├── source  	# 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
    |   ├── _drafts # 草稿文件
    |   └── _posts 	# 文章Markdowm文件 
    └── themes  	# 主题文件夹

    2.2 添加新博客:

    #新建文章，执行命令后可以在 /source/_posts 下看到一个`文章标题.md`文章文件啦
    hexo new '文章标题'

    2.3 本地预览博客:

    #生成静态文件
    hexo g
    #启动hexo本地后台服务
    hexo s

    执行完上述命令， 然后在浏览器中输入 http://localhost:4000 就可以预览效果了

2.4 部署到github:

• 1> 要安装一个部署插件 hexo-deployer-git:

  npm install hexo-deployer-git --save

• 2> 打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）

  deploy:
    type: 'git'
    repo:
  	github: "https://github.com/yanxiangyfg/yanxiangyfg.github.io"
    branch: master

  上述的yanxiangyfg.github.io为github新建的仓库,命名格式必须是用户名.github.io.
• 3> 部署博客:
  部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。
  在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

  #清除缓存文件
  hexo clean
  #部署到上述 _config.yml 文件指定的URL服务器上
  hexo g -d

  执行完下面这个命令,稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦.