---------------------------------

如何搭建博客?它有什么好处(教你10分钟搭建酷炫的个人博客)

-----------------------------------

2023/12/3 16:19:32

如何搭建博客?它有什么好处(教你10分钟搭建酷炫的个人博客)

准备工作



安装

contentnbsp;npminstall -g hexo-cli

初始化

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

创建新文章

contentnbsp;hexo new"My New Post"

运行开发环境

contentnbsp;hexo server contentnbsp;hexo s

构建

contentnbsp;hexo generate contentnbsp;hexo g

部署

contentnbsp;hexo deploy contentnbsp;hexo d

详细准备工作,可以查阅hexo官网

安装主题cactus,一个很程序员的主题,推荐!

克隆仓库,并且将源文件复制到博客项目中themes目录下

gitclone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

themes/cactus/_config.yml相关配置,详细解释可以看官方文档

# 首页Projects的urlprojects_url:https://github.com/xiaobinwu# 设置页面方向direction:ltr# 首页导航# contentnbsp;hexo new page about,可以创建page页面nav:home:/about:/about/articles:/archives/categories:/categories/search:/search/# 社交链接social_links:github:https://github.com/xiaobinwumail:mailto:xiaobin_wu@yahoo.com# 开启标签快捷方式tags_overview:true# 首页 Writing的展示条数posts_overview:show_all_posts:falsepost_count:5sort_updated:false# 排列方式archive:sort_updated:falsepost:show_updated:false# logo设置logo:enabled:truewidth:50height:50url:/images/logo.pnggravatar:false# ico设置favicon:desktop:url:/images/favicon.icogravatar:falseandroid:url:/images/favicon-192x192.pnggravatar:falseapple:url:/images/apple-touch-icon.pnggravatar:false# 高亮语法highlight:kimbie.dark# 博客主题色,dark, light, classic, whitecolorscheme:darkpage_width:48# rss设置rss:atom.xmlopen_graph:fb_app_id:fb_admins:twitter_id:google_plus:# disqus评论,默认不开启,需翻墙disqus:enabled:falseshortname:cactus-1# 谷歌统计google_analytics:enabled:falseid:UA-86660611-1# 百度统计baidu_analytics:enabled:falseid:2e6da3c375c8a87f5b664cea6d4cb29cgravatar:email:xiaobin_wu@yahoo.comvaline:enable:trueapp_id:xxxxxxapp_key:xxxxxxx

Valine评论系统

themes/cactus/_config.yml配置Valine,需要申请app_id,app_key

valine:enable:trueapp_id:xxxxapp_key:xxxx

themes/cactus/layout/_partial/comments.ejs,写入

<%if(theme.valine.enable) { %><scriptsrc="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><scriptsrc='//unpkg.com/valine/dist/Valine.min.js'></script><pid="vcomments"class="blog-post-comments"></p><script>newValine({ el: '#vcomments', visitor: true, appId: '<%=theme.valine.app_id %>', appKey: '<%=theme.valine.app_key %>', placeholder: 'ヾ?≧?≦)o来啊,快活啊!', avatar: 'robohash'}) </script><%} %>

自动部署hexo博客到阿里云服务器

创建仓库(远端服务器创建git仓库),可以使用ssh登入云服务器

mkdirblog.git&& cdblog.gitgitinit--bare

Hexo配置

deploy: type: git message: update repo: root@xx.xxx.xx.xxx:/www/wwwroot/blog.git,master

插件安装

npm installhexo-deployer-git --save

自动部署

进入到git仓库hooks目录,并创建钩子post-receive

cd/www/wwwroot/blog.git/hookstouchpost-receivevimpost-receive

输入下面脚本:

#!/bin/bash -lGIT_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_CLONErm -rf ${PUBLIC_WWW}/* cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

更改权限

chmod+xpost-receive chmod777-R /www/wwwroot/blog chmod777-R /www/wwwroot/tmp/blog

最后部署

contentnbsp;hexo g -d


如何搭建博客?它有什么好处(教你10分钟搭建酷炫的个人博客)

上一条信息:免费搭建博客或网盘(建立博客的好处有什么)

下一条信息:如何自己动手建立自己的博客网站(搭建立属于自己的博客网站)

返回顶部