Hexo个人博客搭建(Yilia主题)

最新推荐文章于 2024-05-01 12:28:31 发布

康__

最新推荐文章于 2024-05-01 12:28:31 发布

阅读量679

点赞数

分类专栏： # 个人博客文章标签： hexo yalia主题个人博客

本文链接：https://blog.csdn.net/qq_30055773/article/details/103095348

版权

个人博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Hexo个人博客搭建(Yilia主题)

一、安装Hexo

  $ npm install -g hexo-cli

二、安装 Git

 $ sudo apt-get install git-core

三、安装 Node.js

 $ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
 $wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
 //执行完上面命令后，需要重启
 $ nvm install stable

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

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

├── _config.yml
├── package.json
├── scaffolds
├── source
 |   ├── _drafts
 |   └── _posts
└── themes

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

$ hexo new "post title with whitespace"

生成静态文件

$ hexo generate

发表草稿

$ hexo publish "post title with whitespace"

启动服务器

$ hexo server

发现当关闭XShell5后 hexo的服务就会关闭，这样就造成无法在后台运行，于是需要安装
安装pm2

四、安装pm2（后台运行）

npm install -g pm2

在博客根目录下创建一个文件run.js

//run.js
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
  if(error){
    console.log(`exec error: ${error}`)
    return
  }
  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);
})

pm2后台启动hexo

//进入博客根目录
pm2 start run.js

这时就可以访问到自己的博客了

五、配置主题

推荐几个hexo主题
几个好用的hexo主题

5.1 Github下载Yilia主题

$ cd /d/document/GitHub/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改hexo根目录下的 _config.yml ： theme: yilia
然后配置yilia文件下的_config.yml（目录：hexo/themes/yilia/_config.yml）配置文件

# Header

menu:
  主页: /
  归档: /archives
 # 随笔: /tags/随笔/
 
# SubNav
subnav:
  github: "https://github.com/diaokx"
  #weibo: "#"
  rss: "/atom.xml"
  #zhihu: "#"
  qq: "qq"
  #weixin: "#"
  jianshu: "https://www.jianshu.com/u/e3bfe2b21dc4"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  mail: "qq"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你的奖励O(∩_∩)O哈哈~'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /assets/alipay.jpg 
# 微信二维码图片地址
weixin: /assets/weixinpay.jpg

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: /assets/header.png

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  #friends: '友链'
  aboutme: '关于我'

#friends:
  #友情链接1: http://localhost:4000/
  #友情链接2: http://localhost:4000/
  #友情链接3: http://localhost:4000/
  #友情链接4: http://localhost:4000/
  #友情链接5: http://localhost:4000/
  #友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家

5.2 点击qq和mail图标发现有报错页面，所有需要新建与subnav配置下的qq对应的目录

$hexo new page qq

该命令在 source 目录下生成一个 qq 目录，qq 目录下有一个 index.md (可以对index.md进行编辑)文件。

//生成html
$hexo g

5.3 点击所有文章提示缺失模块

1、问题

点击 所有文章 提示缺失模块

2、解决办法

确保 node 版本大于 6.2
在博客根目录（注意不是 yilia 根目录）执行以下命令：npm install hexo-generator-json-content --save
在 hexo 的 blog 根目录_config.yml 里添加配置（保持格式，不要改动任何空格缩进），关掉 hexo s之后执行 hexo g 重新生成：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

执行完后发现有报错，报错提示：ERROR Plugin load failed: hexo-generator-json-content
问题原因需要安装n模块，并将node.js更新到最新稳定版,执行命令如下：

//安装n模块
$ npm install -g n
//更新node.js
$ n stable

5.4 头像/图片不显示

1、存放位置

头像、图标图片的存放位置是 /themes/yilia/source/ 下任意位置，可以自己新建一个文件夹存放，我存放在assets文件夹下。

2、配置设置

配置文件为/themes/yilia/_config.yml

由于设置路径的根目录 /themes/yilia/source/，因此，我的头像存放的地址是/themes/yilia/source/assets/header.png，设置则为 avatar: /assets/header.png

参考链接

康__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Hexo个人博客搭建(Yilia主题)

Hexo个人博客搭建(Yilia主题)一、安装Hexo $ npm install -g hexo-cli二、安装 Git $ sudo apt-get install git-core三、安装 Node.js $ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh $wget -qO- htt...
复制链接

扫一扫

专栏目录