| 1. 安装Notejs |
1. download Notejs
https://nodejs.org/en/
Note.js安装完毕之后默认是在以下目录
C:Program Files
odejs
Node module 默认目录是在
C:Program Files
odejs
ode_modules
用户的一部分
C:Users angrAppDataRoaming
pm
ode_modules
例如hexo-cli
C:Users angrAppDataRoaming
pm
ode_moduleshexo-cli
C:Users angrAppDataRoaming
pm
ode_moduleshexo-cliin
C:Users angrAppDataRoaming
pm
ode_moduleshexo-clilib
|
| 2、安装git |
https://git-scm.com/download/win
配置环境变量
1、从Git官网下载windows版本的git：http://git-scm.com/downloads
2、一般使用默认设置即可：一路next，git安装完毕！
3、但是如果这时你打开windows的cmd，在里面打git命令会提示“不是内部或外部命令，也不是可运行的程序”，
想要直接在windows的cmd里使用git命令要多加如下两步
3.1、找到git安装路径中bin的位置，如：C:Program FilesGitin
找到git安装路径中git-core的位置，如：C:Program FilesGitmingw64libexecgit-core;
注："D:Program FilesGit"是安装路径，可能与你的安装路径不一样，要按照你自己的路径替换"D:Program FilesGit"
3.2、右键“计算机”->“属性”->“高级系统设置”->“环境变量”->在下方的“系统变量”中找到“path”->选中“path”并选择“编辑”->将3.1种找到的bin和git-core路径复制到其中->保存并退出
注：“path”中，每个路径之间要以英文输入状态下的分号——“;”作为间隔
|
| 4、生成blog |
从现在开始，我们就可以用hexo来生成一个博客了。
首先新建一个文件夹，位置随意，然后 cd 到这个文件夹下，运行命令：
hexo init
hexo会将这个文件夹初始化成一个博客专用文件夹，生成过程稍微要点时间，耐心等待。
初始化完成后，会有一个默认主题以及一个hello-word的默认文章。所以我们可以先生成博客来看一下效果，运行命令：
hexo generate //可以简写成 hexo g
然后hexo会开始生成博客，生成结束后，会多出一个public的文件夹，这个文件夹就是hexo生成的一个完整的静态网站，也就是我们的博客。
网站生成好了，我们要浏览它，所以要开启一下服务器，运行命令：
hexo server //可以简写成 hexo s
然后打开浏览器，输入 localhost:4000 就可以浏览我们的博客了。
|
| 6、安装admin插件 |
1、在Hexo网站目录下，安装 Hexo Admin 插件
npm install --save hexo-admin
或# install hexo-myadmin (该插件比hexo-admin要强大的多）
npm install hexo-myadmin --save
{
you can add a few config variables to your hexo _config.yml:
admin:
username: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: a secret something
The password_hash is the bcrypt hash of your password. You can use this site to come up with that, or whatever you want. The secret is used to make the cookies secure, so it's a good idea to have it be long and complicated.
}
2、启动本地服务器并打开管理界面，即可使用
hexo server -d
http://localhost:4000/admin/#
优化:
node_moduleshexo-adminwwwloginindex.html将Username, Password两个字段去掉。
node_moduleshexo-adminwwwundle.css
...
.editor_title {
font-size:34px; -> font-size: 16px
}
|
| 8、其它定制 |
1）修改主页条目：
themeslandscape\_config.yml
2）修改menu:
主页: /
事务: /archives
3）修改Banner
themeslandscapesourcecssimagesanner.jpg
4）修改版权
themeslandscapelayout\_partialfoot.ejs
导航
打开主题中的设置文件，即themes<theme_name>\_config.yml（其中<theme_name>是当前主题的名字，默认为landscape，下同），找到menu:，在列表的末端添加About: 关于。刷新页面，导航栏上就出现了关于链接。
边栏
进入themes<theme_name>layout\_widget目录中，创建about.ejs文件，模仿其他文件中的模版，输入以下内容：
=======================================
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">About</h3>
<div class="widget">
邮箱：xxx@xxx.com<br />
微博：@xxxxx
</div>
</div>
<% } %>
=======================================
打开themes<theme_name>\_config.yml，找到#Sidebar，在最后面添加- about。刷新页面。
底栏
打开themes<theme_name>layout\_partialfooter.ejs修改。
banner
打开themes<theme_name>sourcecssimages，把banner.jpg换掉。
|
| 9、增加搜索 |
npm install hexo-generator-searchdb --save
修改 站点配置 文件
search:
path: search.xml
field: post
format: html
limit: 10000
修改 主题配置文件
local_search:
enable: true
独立页面优化
~~~
<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/local_search.js"></script>
<div>
<span class="h1"><a href="#"></a></span>
<div id="site_search">
<button type="button">关键字</button>
<input type="text" id="local-search-input" style=" 480px;" results="0"/>
<div id="local-search-result"></div>
</div>
</div>
<script>
var searchFirst=0;
function doSearch(){
if(searchFirst === 0){
var path = "/search.xml";
searchFunc(path, "local-search-input", "local-search-result");
searchFirst++;
}
}
doSearch();
</script>
~~~
|
| 10、运行 |
$ hexo server
-p 选项，指定服务器端口，默认为 4000
-i 选项，指定服务器 IP 地址，默认为 0.0.0.0
-s 选项，静态模式 ，仅提供 public 文件夹中的文件并禁用文件监视
自动脚本
(*.vbs):
set ws = createobject("wscript.shell")
ws.run "D:qingqueBlogstart_blog.bat", 0
（*.bat)：
c:
cd C:sw
ginx-1.18.0
dir
start /b nginx.exe
echo start nginx ok
d:
cd D:qingqueBlog
hexo s
|
| 11、NGINX 方向代理 |
#add
upstream hexo_server {
server localhost:4000;
}
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
# comment beloew two rows(default pages)
# root html;
# index index.html index.htm;
# add page indirecting
auth_basic "Login";
auth_basic_user_file C:/nginx-1.16.1/conf/passwd;
proxy_pass http://hexo_server;
#proxy_redirect off;
#proxy_set_header Host $host;
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
...
}
|
| 12. 检索页面 |
<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/local_search.js"></script>
<div></div>
<style>
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.setimage img{display:inline-block;}
</style>
<span class="h1"><a href="#"></a></span>
<center><h5>站内检索</h5>
<div class="setimage">
<img src="../../../../images/search_16.png" alt="" />
<input type="text" id="local-search-input" style=" 480px;" results="0"/>
</div>
</center>
</br></br>
<div id="local-search-result"></div>
<div id="site_search"></div>
<script>
var searchFirst=0;
function doSearch(){
if(searchFirst === 0){
var path = "/search.xml";
searchFunc(path, "local-search-input", "local-search-result");
searchFirst++;
}
}
doSearch();
</script>
|
