算法攻城狮

0%

博客搭建教程

发表于 更新于 分类于 ， ， 阅读次数：
本文字数： 2.1k 阅读时长 ≈ 2 分钟

前言

Hexo是一个免费，简洁的博客框架，接下来讲述在Mac下Github+Hexo博客的搭建流程

搭建流程

GitHub账号注册以及新建仓库

  • 进入GitHub官网注册账号

  • 注册成功后点击 “New repository”

  • 新建仓库的名字格式必须是username.github.io，其中username就是你的用户名。比如我的用户名是HuangNing616，那么新创建的仓库名就是HuangNing616.github.io，这是很关键的一步哦！！！输入名字后，直接点击页面底部的“Create repository”

    如果有不知道自己用户名的小伙伴，可以点击自己的GitHub头像来查看

安装博客需要的框架

  • 安装Homebrew(已安装可略过)
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 查询Homebrew是否安装成功
    brew -v
  • 安装git(已安装可略过)
    brew install git
  • 查询git是否安装成功 
    git --version
  • 安装 node.js(已安装可略过)
    brew install node
  • 查询node是否安装成功
    node -v
  • 安装 hexo(已安装可略过)
    npm install -g hexo
  • 查询hexo是否安装成功
    hexo -v

配置SSH Key

虽然这一步不是必须的，但是如果配置了SSH key 的话，那么之后每次更新博客都不需要输入用户名和密码，这样会更加方便些

配置方法请参考Mac下配置SSH key

搭建Hexo框架

  • 在任意位置创建一个文件夹，比如创建MyBlog，然后cd到该目录下

    # 在当前目录下创建一个MyBlog文件夹
    mkdir MyBlog
    # 进入目录
    cd MyBlog

  • 在MyBlog目录下，hexo初始化

    hexo init

  • 启动本地服务

    hexo s  # 也可是 hexo server

    如果出现

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

    说明博客框架搭建成功，在浏览器输入 http://localhost:4000 就可以访问啦～

因为现在是本地博客，别人无法访问，因此接下来需要将其部署到GitHub上

将博客关联到GitHub仓库

Step1 在博客目录MyBlog下的_config.yml文件是博客的主要配置文件， 我们打开该文件编辑其中的deploy节点，将username换成自己的用户名（我的是HungNing616）

deploy:
  type: git                                                 # 使用Git部署
  repo: git@github.com:HuangNing616/HuangNing616.github.io  # 自己的GitHub仓库地址
  branch: master

注：repo为这种形式的是配置了SSH Key之后的，如果没有配置则使用Https形式的地址

Step2 在博客目录下运行

npm install hexo-deployer-git --save

这样就能够使Hexo部署到GitHub上了

Stpe3 然后在博客目录中执行

#清除缓存
hexo clean
# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d

然后在浏览器输入username.github.io就可以访问你的博客了，比如我的博客就是HuangNing616.github.io

部署流程

Step1 创建新文章

hexo new Mac下的Hexo+Github博客搭建

可以在站点的source/_posts 路径下看到新建的文章，它是.md格式个文件

Step2 在博客根目录下运行

hexo clean && hexo g && hexo s

这样就可以在本地预览文章

Step3 将博客部署到 Github上

hexo clean && hexo g && hexo d

定制化配置

首页展示文章数量

在根目录下的_config.yml中修改

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10   # 首页展示的文章数量
  order_by: -date

注意事项

  • 退出博客的正确方法是在终端输入 control + c，但是如果按 control + z 退出的话并没有关闭hexo的服务器，再次启动hexo的时候会报端口4000被占用的错误，这个时候我们需要杀掉端口号是4000的进程，终端命令步骤：

    sudo lsof -i :4000        // 查看端口号是4000的PID（进程ID）
    sudo kill -9 xxxx         // 杀掉相应的PID xxxx

  • 如果hexo指令出现问题的时候可以尝试通过下述终端命令

    npm intall hexo --save

这是小编磕磕绊绊地完成的第一篇博客🙈，希望可以大家可以支持哦～ 🥳🥳