Hexo+OSChina搭建免费个人博客

参考文档:免费个人博客搭建教程(详细-图文)

环境搭建

  1. Node.js安装

    参考:http://www.runoob.com/nodejs/nodejs-install-setup.html

    没有VPN的用户可通过在命令行窗口中执行以下代码切换npm的源:

    1
    npm config set registry http://registry.npm.taobao.org #切换npm为淘宝镜像
  2. Git安装

    参考:http://www.runoob.com/git/git-install-setup.html

  3. Hexo安装

    在命令行窗口中执行:

    1
    npm install -g hexo-cli #安装Hexo

    安装成功后可在命令窗口输入hexo,测试是否安装成功;

    hexo常用命令说明:https://hexo.io/zh-cn/docs/commands.html

本地运行Hexo

使用Git Bash执行下列命令,folder就是我们要放文档的地方,注意每次使用的命令行操作的时候要切换到这个目录下面。

1
2
3
4
$ cd <folder> #切换到项目目录下
$ hexo init #初始化,Hexo 默认在目前的文件夹建立网站
$ npm install #install before hexo generate
$ hexo generate #生成静态文件

执行$ npm install时,出现以下警告:

1
2
npm WARN optional Skipping failed optional dependency /browser-sync/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8

参考:进行npm install时出现警告信息

fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可。

1
2
3
$ cd <folder> #切换到项目目录下
$ npm install #install before start blogging
$ hexo server #运行本地服务

浏览器输入http://localhost:4000就可以看到效果。

如果输入后无法访问,可能是Hexo默认端口(4000)被占用,使用另外未被占有端口运行:

1
$ hexo server -p 5000

浏览器输入自然变成:http://localhost:5000。

修改Hexo的主题

  1. 可以在官方收录的主题中去挑选:Hexo主题
  2. 主题下载后,将主题文件解压到Hexo项目的themes文件夹下面;
  3. 修改Hexo的配置文件_config.yml,将里面theme 对应的值改为之前下载的主题的文件夹名字;

    _config.yml配置文档:https://hexo.io/zh-cn/docs/configuration.html

    修改内容位置如下:

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-twentyfifteen-wordpress-master

    注意:这里“: ”后面必须要有一个空格,而且这个空格要在英文输入法下,不然会报一些稀奇古怪的错。

  4. 执行以下代码,重新在本地启动项目:

    1
    2
    3
    4
    5
    $ cd <folder> #切换到项目目录下
    $ npm install #install before hexo generate
    $ hexo clean #清除缓存文件 (db.json) 和已生成的静态文件 (public)
    $ hexo generate #生成静态文件
    $ hexo server -p 5000 #运行本地服务
  5. 主题中也有一个叫_config.yml配置文件,其中主要是些与主题相关的设置,一般里面也都有注释。

更新博客文章

  1. 使用MarkDown来写博客文章,可使用有道笔记或者马克飞象之类的编辑器,链接:https://maxiang.io/

  2. 在编辑器里面写好文章后,复制或另存为.md文件, 与普通的.md文件不同,要在文件开头添加下面代码:

    1
    2
    3
    4
    5
    title: #文章标题
    date: #文章日期
    tags: #文章标签
    categories: #文章分类
    ---
  3. 将写好的.md文件放入Hexo项目的source目录下的_posts文件夹中;

  4. 执行以下代码,重新在本地启动项目:

    1
    2
    3
    4
    5
    $ cd <folder> #切换到项目目录下
    $ npm install #install before hexo generate
    $ hexo clean #清除缓存文件 (db.json) 和已生成的静态文件 (public)
    $ hexo generate #生成静态文件
    $ hexo server -p 5000 #运行本地服务
  5. 浏览器输入http://localhost:5000就可以看到效果。

    遇到问题:

    1. https://segmentfault.com/q/1010000000618915

      问题描述:

      我在_config.yml 中设置的菜单有Home,Archive,Category,About,

      可是只有Home和Archive点进去才有内容,Category和About都错Can’t found,还需要其他哪里设置才能生效么?

      解决方式:

      在命令行里面输入:

      1
      hexo new page "about"

      然后你会发现source里面多了个目录about,里面有个index.md文件。其实你也可以手动建立。页面的格式和文章一样。

      接着把链接加上,themes//_config.yml里面的menu一项,添加一行About: /about。

      完事。

      参考:https://www.zhihu.com/question/33324071

    2. 页面国际化:https://hexo.io/zh-cn/docs/internationalization.html

      1
      2
      3
      4
      5
      6
      7
      # Site
      title: Hexo
      subtitle:
      description:
      author: John Doe
      language: zh-CN #设置themes下对应语言文件名,如themes\landscape\languages\zh-CN.yml
      timezone:

发布静态Html文件到码云Pages上

参考文档:http://git.mydoc.io/?t=154714

  1. 注册一个码云帐号,并创建一个项目;

  2. 创建完项目后得到项目的Https的地址后面要用;

    这里借用一个插件来帮助我们完成代码上传的工作,安装 hexo-deployer-git。安装代码如下:

    npm install hexo-deployer-git –save #把public里面生成的文件推上到码云上。

  3. 配置项目根目录_config.yml文件,修改deploy的值;

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repository: https://{用户名}:{密码}@git.oschina.net/{用户名}/{用户名}.git
    branch: master
  4. 修改完后在命令窗口执行下面命令:

    1
    2
    cd <folder> #切换到项目目录下
    hexo deploy #一键部署功能
  5. 登录码云,查看之前创建的项目中出现了本地项目中public文件夹中的文件,部署成功;

  6. 打开项目的Pages页,启动码云的pages服务,访问链接为启用时显示的网站地址;

    如果你想以根目录的形式访问自己的静态网站,只需要建立一个与自己个性地址同名的项目即可,如 http://git.oschina.net/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.oschina.io直接访问,那么他就可以创建一个名字为ipvb的项目 http://git.oschina.net/ipvb/ipvb 部署完成后,就可以以 http://ipvb.oschina.io 进行访问了。

Top