Windows下使用我的博客模板搭建个人博客

发表于 | 更新于: | 分类于
介绍在Windows下如何基于我当前这个博客模板搭建你的个人博客，mac下亦可参考本文进行搭建^_^

音乐时刻


《小酒窝》是林俊杰、蔡卓妍合唱的一首歌曲，由林俊杰作曲、王雅君作词，收录于林俊杰2008年发行的专辑《JJ陆》中。这首歌曲是电视剧《爱情睡醒了》的插曲。
2009年这首歌曲获得了十大劲歌金曲最受欢迎华语歌曲银奖、十大中文金曲奖全国最佳中文歌曲奖、百度娱乐沸点最热门十大金曲等奖项。


《小酒窝》 - 林俊杰/蔡卓妍


前言

   我当前这个博客是基于hexo搭建的，主题是next，个人感觉很清爽、很简洁，然后维护起来也很容易，所以如果有小伙伴想用我的这个模板，我还是很支持和感谢的。
我的博客模板很方便搭建部署，因为：

  • 已经安装好next主题
  • 必需的npm包已经写入package.json，包括像
    • hexo-generator-search
    • hexo-deployer-git
    • hexo-git-backup

下面介绍如何在Windows下使用我的博客模板搭建个人博客。

安装 node 和 hexo

  • 安装node
    去nodejs官网下载32或者64位的 node 安装包，然后在Windows下安装 node ，安装完成后，添加 node 到系统 PATH 变量，然后 Win+r 打开运行窗口，输入 cmd 打开命令窗口，然后键入：

    1
    node -v

    查看 node 是否已安装好，再键入

    1
    npm -v

    查看 npm 是否已安装好。

  • 安装Hexo
    这里先安装cnpm，以加快npm包的下载速度：

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后，安装hexo

    1
    $ cnpm install hexo -g

    打开cmd命令窗口，键入：

    1
    hexo -v

    查看 hexo 是否已安装好。

安装git

   去git for windows下载32或者64位的 git 安装包，然后在Windows下安装 git ，安装完成后，添加 git 到系统 PATH 变量，然后 Win+r 打开运行窗口，输入 cmd 打开命令窗口，然后键入：

1
git -v

查看 git 是否已安装好。

本地生成 SSH key 并添加到 github

  • 本地生成ssh key
    https每次push需要输入用户名和密码，为了以后部署方便，我们使用ssh提交，使用ssh需要配置添加SSH key，具体如下：
    打开 git bash，输入以下命令
    1
    2
    $ cd ~
    $ ssh-keygen -C "your_computer_name"

接着会提示输入文件名，默认就行了，Enter
再接着会提示你输入两次密码，这个是push时候的密码，我们选择空密码，Enter
没问题的话就成功了。

  • 添加ssh key到github
    1
    $ clip < ~/.ssh/id_rsa.pub

然后登录github，进入右上角Account Settings，然后点击菜单栏的SSH key进入页面添加key，
点击Add SSH key按钮，把复制的SSH key代码粘贴到key所对应的输入框，点击确认，Title会默认使用你的”your_computer_name”。

  • 测试该SSH key
    1
    $ ssh -T git@github.com

出现

1
2
$ Hi " your-github-username "! You've successfully authenticated, but GitHub does not provide shell access.
$ Connection to github.com closed.

OK，测试成功^_^

搭建博客

  • 新建 github pages 仓库
    注册github账号
    然后新建一个仓库，仓库名称为 your-github-username.github.io，比如我的是spaceJmmy.github.io

  • 搭建博客
    在本地磁盘新建一个blog文件夹，比如在D盘新建一个blog文件夹，然后进入blog文件夹，执行以下操作：
    右键打开 git bash，输入以下命令

    1
    2
    3
    $ git clone git@github.com:spaceJmmy/spaceJmmy-blog-template
    $ cd spaceJmmy-blog-template
    $ cnpm install

    下载完成后，继续输入：

    1
    2
    $ hexo clean
    $ hexo s

    如果出现

    1
    2
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop

    说明启动成功，但是信息还是我的，所以接下来要修改配置博客了。

配置博客

修改站点配置文件 spaceJmmy-blog-template/_config.yml：

  • 修改站点信息，将以下内容改成你自己的信息：

    1
    2
    3
    4
    5
    # Site
    title: spaceJmmy的博客 #博客名
    subtitle: 纯真容易幸福，单纯就易满足 #博客副标题
    description: #给搜索引擎看的，对站点的描述，可以自定义
    author: spaceJmmy #作者名称

  • 修改站点 URL ，将站点 URL 改成你自己的 URL：

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://spaceJmmy.github.io
    root: /

  • 修改部署备份信息：
    把两个 git@github.com:spaceJmmy/spaceJmmy.github.io.git 换成成你自己的 repo 地址。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Deployment
    deploy: 
      type: git
      repo: 
          github: git@github.com:spaceJmmy/spaceJmmy.github.io.git,master
      message: updated at {{ now("YYYY-MM-DD HH:mm:ss") }} 
    backup:
      type: git
      repository:
                github: git@github.com:spaceJmmy/spaceJmmy.github.io.git,src
      message: updated at {{ now("YYYY-MM-DD HH:mm:ss") }}

修改 next 主题配置文件 spaceJmmy-blog-template/themes/next/_config.yml：

  • 修改 github 社交信息，将我的 GitHub 链接 https://github.com/spaceJmmy 改成你自己的链接：
    1
    2
    3
    social:
      #LinkLabel: Link
      GitHub: https://github.com/spaceJmmy

更换站点图标和用户头像：

  • 更换站点图标
    更换本地文件夹 spaceJmmy-blog-template/themes/next/source 下面的 favicon.ico ，换成你自己的站点图标，文件名不要改变。
  • 更换用户头像
    更换本地文件夹 spaceJmmy-blog-template/themes/next/source/images 下面的 avatar.gif ，换成你自己的用户头像，文件名不要改变。

修改 关于 页面：

   修改文件夹 spaceJmmy-blog-template/source/about 下的 index.md 文件，改为你自己的 关于 页面。

测试配置是否成功：

   在 git bash 中输入以下命令：

1
2
$ hexo clean 
$ hexo s

浏览器打开 http://localhost:4000/ ，如果成功的话，你会发现你的博客已经呈现出你的信息了，吼吼，狂欢吧…… 不过，先别急，先把网站部署备份了再说：

OK，接下来部署备份你的网站，这时候在 bash 终端 Ctrl+C 停止服务器运行，然后输入：

1
$ hexo d

你会发现静态网站已经 push 到你 repo 的 master 分支了。浏览器打开 your-github-username.github.io 就能看到你的博客了，哈哈……
继续，备份博客源码之前需要先删除当前目录下的 .git 文件夹，然后 bash　输入：

1
$ hexo b

你会发现网站源码已经备份到你 repo 的 src 分支了，至此，可以开心的庆祝啦，哈哈。

博客以后的常态化管理

   以后写博客只需要自己写一个 .md 文件，然后放到/source/_posts文件夹下，写好博客后，来个拉风的部署三部曲，呼呼：

1
2
3
$ hexo clean #清空缓存
$ hexo d #部署站点到master分支
$ hexo b #备份站点源代码到src分支

换台电脑重新部署（记得添加新的SSH key）

   得益于前面的工作，换台电脑我们只需要clone仓库的src分支，然后重新生成hexo博客环境来撰写和发布post。

1
2
3
$ git clone -b src git@github.com:your-github-username/your-github-username.github.io.git
$ cd your-github-username.github.io
$ cnpm install

hexo环境搭建成功，然后 hexo s 本地预览，添加新的post，再按上述部署三部曲走起，呼呼…
有时 hexo b 会报错，提示执行 git push，那就 git push，你会看到 push 成功，哈哈。