网站首页 > 技术文章 正文
以个人博客为例,博客地址(http://wushaobin.top/)
准备工作
安装
$ npm install -g hexo-cli
初始化
$ hexo init <folder>
$ cd <folder>
$ npm install
创建新文章
$ hexo new "My New Post"
运行开发环境
$ hexo server
$ hexo s
构建
$ hexo generate
$ hexo g
部署
$ hexo deploy
$ hexo d
详细准备工作,可以查阅hexo官网
安装主题cactus,一个很程序员的主题,推荐!
克隆仓库,并且将源文件复制到博客项目中themes目录下
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus
themes/cactus/_config.yml相关配置,详细解释可以看官方文档
# 首页Projects的url
projects_url: https://github.com/xiaobinwu
# 设置页面方向
direction: ltr
# 首页导航
# $ hexo new page about,可以创建page页面
nav:
home: /
about: /about/
articles: /archives/
categories: /categories/
search: /search/
# 社交链接
social_links:
github: https://github.com/xiaobinwu
mail: mailto:xiaobin_wu@yahoo.com
# 开启标签快捷方式
tags_overview: true
# 首页 Writing的展示条数
posts_overview:
show_all_posts: false
post_count: 5
sort_updated: false
# 排列方式
archive:
sort_updated: false
post:
show_updated: false
# logo设置
logo:
enabled: true
width: 50
height: 50
url: /images/logo.png
gravatar: false
# ico设置
favicon:
desktop:
url: /images/favicon.ico
gravatar: false
android:
url: /images/favicon-192x192.png
gravatar: false
apple:
url: /images/apple-touch-icon.png
gravatar: false
# 高亮语法
highlight: kimbie.dark
# 博客主题色,dark, light, classic, white
colorscheme: dark
page_width: 48
# rss设置
rss: atom.xml
open_graph:
fb_app_id:
fb_admins:
twitter_id:
google_plus:
# disqus评论,默认不开启,需翻墙
disqus:
enabled: false
shortname: cactus-1
# 谷歌统计
google_analytics:
enabled: false
id: UA-86660611-1
# 百度统计
baidu_analytics:
enabled: false
id: 2e6da3c375c8a87f5b664cea6d4cb29c
gravatar:
email: xiaobin_wu@yahoo.com
valine:
enable: true
app_id: xxxxxx
app_key: xxxxxxx
Valine评论系统
themes/cactus/_config.yml配置Valine,需要申请app_id,app_key
valine:
enable: true
app_id: xxxx
app_key: xxxx
themes/cactus/layout/_partial/comments.ejs,写入
<% if(theme.valine.enable) { %>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments" class="blog-post-comments"></div>
<script>
new Valine({
el: '#vcomments',
visitor: true,
appId: '<%=theme.valine.app_id %>',
appKey: '<%=theme.valine.app_key %>',
placeholder: 'ヾ?≧?≦)o来啊,快活啊!',
avatar: 'robohash'
})
</script>
<% } %>
自动部署hexo博客到阿里云服务器
创建仓库(远端服务器创建git仓库),可以使用ssh登入云服务器
mkdir blog.git && cd blog.git
git init --bare
Hexo配置
deploy:
type: git
message: update
repo: root@xx.xxx.xx.xxx:/www/wwwroot/blog.git,master
插件安装
npm install hexo-deployer-git --save
自动部署
进入到git仓库hooks目录,并创建钩子post-receive
cd /www/wwwroot/blog.git/hooks
touch post-receive
vim post-receive
输入下面脚本:
#!/bin/bash -l
GIT_REPO=/www/wwwroot/blog.git
TMP_GIT_CLONE=/www/wwwroot/tmp/blog
PUBLIC_WWW=/www/wwwroot/blog
rm -rf ${TMP_GIT_CLONE}
mkdir ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
更改权限
chmod +x post-receive
chmod 777 -R /www/wwwroot/blog
chmod 777 -R /www/wwwroot/tmp/blog
最后部署
$ hexo g -d
- 上一篇: 前端系列——博客搭建以及http事务
- 下一篇: 个人博客管理系统源码 个人博客网源码
猜你喜欢
- 2024-10-03 html页面中css缩放图片的方法 html图片大小怎么设置css
- 2024-10-03 前端页面实现的布达拉宫博客java旅游景点网站jsp源代码mysql
- 2024-10-03 如何不花钱也能拥有一个属于自己的在线网站、博客
- 2024-10-03 7.4K Star!Notion笔记变独立博客?NotionNext,小白也能轻松上手
- 2024-10-03 文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」
- 2024-10-03 用 React 和 Next.js做一个简单的博客网站(下)
- 2024-10-03 一年时间,3万行Go代码,我写了一个博客程序
- 2024-10-03 通过在GitHub上搭建博客来学习前端知识
- 2024-10-03 前端教程丨手把手教你用 Next.js 搭建个人博客,从入门到吃鸡
- 2024-10-03 2022年的前端人都在做什么 2021前端最新技术
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)