007sair / 007sair.github.io Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 1.0 18.59 MB

Blog

Home Page: http://007sair.github.io

HTML 24.13% CSS 38.45% JavaScript 37.43%

007sair.github.io's Introduction

分支介绍

hexo：数据分支，用于编辑更新博客，执行相关命令会将内容发布到master分支；
master：展示分支，hexo分支发布的内容会展现在此分支。

操作流程

在hexo分支上写博客，文章会被发布到master分支。

# 1. 创建新文章
$ hexo new "页面名称"

# 2. 启动本地服务
$ hexo s -g

# 3. 发布博客
$ hexo d -g

提交 git

git add .
git commit -m "..."
git push origin hexo

创建博客

创建仓库，仓库名：007sair.github.io，只有这种命名(xxx.github.io)的仓库才能是博客地址；
创建两个分支：master 与 hexo；
在github账号中设置hexo为默认分支，Settings - Branches - Default branch；
拷贝仓库[email protected]:007sair/007sair.github.io.git;
切换分支到hexo，在本地007sair.github.io目录下依次执行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git，注意有坑;
修改_config.yml中的deploy下的branch: master；
依次执行git add .、git commit -m "..."、git push origin hexo提交网站相关的文件；
执行hexo d -g生成网站并部署到github上。

踩坑

第 5 步中特别要注意，hexo init会清空.git 文件夹（即版本控制信息会丢失）

解决方法：先拷贝出.git文件夹，等第 5 步完成后，再粘贴.git文件进去。

配置Git

让本地Git项目与Github账户建立联系，步骤如下：

# 1. 设置Git的user name和email(如果是第一次的话)
$ git config --global user.name "your_name"
$ git config --global user.email "[email protected]"

# 2. 检查是否已经有SSH Key。
$ cd ~/.ssh  # Mac。 windows在 C:\Users\Administrator\.ssh 中查找
$ ls  # 查看是否存在 id_isa 和 id_isa.pub 文件

# 3. 如果步骤2没有文件
$ ssh-keygen -t rsa -C "[email protected]"

# 4. 添加SSH Key到GitHub
$ cat ~/.ssh/id_rsa.pub
# 打开Github，点击右上角头像，依次打开`Settings — SSH and GPG keys — New SSH key`
# 将上面命令显示的内容复制到key文本框中，点击`add key`即可。

# 5. 测试
$ ssh -T [email protected]
# 成功将会看到：
# Hi 007sair! You've successfully authenticated, but GitHub does not provide shell access.

007sair.github.io's People

Contributors

Watchers

Forkers

pickwei

007sair.github.io's Issues

我又回来啦！ | Chan

http://007sair.github.io/2017/08/22/hello-world/

Webpack & Vue 坑

@(webpack)

1.webpack-dev-server不起作用

webpack-dev-server无法实时刷新？

修改webpack.config.js配置的scripts项

"scripts": {
    "start": "webpack-dev-server --hot --inline"
}

在webpack.config.js的output项内添加进行修改：

//指向异步加载的路径
publicPath: __dirname + '/build/'

替换为：

publicPath: '/build/'

运行npm start

为什么这样做呢？因为我们这前用webpack是把组件异步加载在本地上，而我们用了热替换后是地址委托到了http://localhost:8080/端口了，所以要去掉__dirname(指向本地根目录)，一切准备完毕了，接下来直接运行npm start，然后打开http://localhost:8080/就可以访问并实时刷新。

2.sass&css单文件打包

很多时候我们不喜欢require进来的css或者sass被添加到html的style标签中，而是作为单独的css文件被html引用。

安装extract-text-webpack-plugin插件

npm install extract-text-webpack-plugin --save-dev

配置webpack.config.js

//a.先require进来
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//b.再添加到plugins中
plugins: [
	new ExtractTextPlugin("styles.css")
]

修改module的loaders配置

//需要知道的是，ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左，即先对引入的 .sass 使用 sass loader 得到编译后的 css 再使用 css-loader 按照正常 css-loader 的方式处理。
loaders: [
	{
		test: /\.css$/,
		loader: ExtractTextPlugin.extract("style-loader", "css-loader")
	}, {
		test: /\.scss$/,
		loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
	}
]

参考：http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

3.Vue踩坑之一：template无法在table中使用

未解决。

4.Vue踩坑之二：字体在生产环境的bug

正常开发时我们会这么设置字体：

.wrap{
  font-family: "微软雅黑"; /* 或者 */
  font-family: "\5FAE\8F6F\96C5\9ED1";
}

执行 npm run build后，字体没生效，F12查看发现代码变成这样了：

.wrap{
  font-family: \\5FAE\8F6F\96C5\9ED1;
}

修改方法：

.wrap{
  font-family: \5FAE\8F6F\96C5\9ED1; /* 去掉双引号！ */
}

flex样式预览工具 | Chan

http://007sair.github.io/2017/07/07/flex-tool/