第一篇博客

发表于

这第一篇博客，就讲讲这个站是怎么诞生的吧。

依赖

  • git
  • npm
    • hexo

步骤

  1. 安装npm，执行代码并检查npm是否安装成功

    1
    2
    brew install node
    npm -v

  2. 安装hexo，执行

    1
    npm install hexo-cli -g -d

  3. 去GitHub新建一个repository。具体步骤就不赘述了

  4. 新建好repo后，控制台cd到你希望放博客项目的地方执行

    1
    2
    git clone https://github.com/[username]/[repo-name]
    cd [repo-name]

  5. 在当前文件夹初始化hexo

    1
    hexo init

  6. 安装依赖包

    1
    npm install

  7. 现在可以开启本地服务器测试一下

    1
    hexo s

    用浏览器打开http://localhost:4000/ 查看页面

  8. 如果你看到了这样的页面，说明你已经成功了一半了

    initial_screenshot

    按ctrl+c可停止本地服务器

Make some magic

  1. _config.yml

    这个文件是用来配置你的博客站点的，注意这里使用yml语法，’:’之后要加空格，下面挑些来解释

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    # Site
    title: Ja50n's B10g Sit3               #主标题
    subtitle: 学习笔记 & 吃吃吃 & 玩玩玩      #副标题
    description: 随便写写                   #描述
    author: Jason Wood                     #作者
    language: zh-Hans                      #语言(与主题有关)
    timezone: Asia/Shanghai                #时区
    # URL
    url: https://jason2031.github.io       #这里跟你的repo一致
    root: /                                #根目录
    permalink: :year/:month/:day/:title/   #文章链接格式
    # Directory
    source_dir: source                     #源文件目录
    public_dir: public                     #生成文件目录
    # Writing
    new_post_name: :title.md               #默认标题(若新建博文时未指定标题则为这个)
    default_layout: post                   #默认模板
    titlecase: false                       #自动将标题转换为小写
    social:                                #社交网络地址
      GitHub: https://github.com/Jason2031
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/Jason2031/Jason2031.github.io.git
      branch: master

  2. 接下来可以创建新的博文了，执行

    1
    hexo new "hello"

    执行这行命令将在你的source/_post/文件夹下创建一个hello.md文件，在第二条三横线下编写正文即可。

  3. 如果需要在博文中使用图片，用传统的markdown语法”![]()”好像不行，这时回到项目根目录的_config.yml文件，找到post_asset_folder变量，将其设置为true即可，hexo将在下一次执行new指令时创建与页面同名的文件夹，在markdown里使用相对路径引用图片即可

    比如你的_post/文件夹的结构如下

    Lorem ipsum
    ├── dolor sit amet.jpg
    ├── consectetur adipisicing elit.jpg
    └── sed do eiusmod.jpg
    Lorem ipsum.md

    你想在Lorem ipsum.md中引用sed do eiusmod.jpg，在Lorem ipsum.md使用![sed do eiusmod](Lorem ipsum/sed do eiusmod.jpg)即可

  4. 发布博客

    • 设置git身份信息

      1
      2
      git config --global user.name "你的用户名"
      git config --global user.email "你的邮箱"

    • 安装hexo-deployer-git插件

      1
      npm install hexo-deployer-git --save

    • 发布更新博客

      1
      hexo d -g

      发布时好像要输入账号密码，当你看到

      1
      INFO  Deploy done: git

      时，说明已经部署成功了，可以到相应的.github.io看看成果

Make it fancier

  1. 主题

    通过你喜欢的主题来定制自己的博客，可以到主题列表挑选自己喜欢的主题。以本博客使用的NexT为例，在博客项目根目录执行命令

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next #主题的地址

    再到根目录_config.yml中指定

    theme: next

    下载安装后的个性化就根据各个主题而定了，具体请参考各个主题的介绍，这里不再赘述