从零开始制作一个个人网站(2017.12.8更新,未完成)

1 你需要准备什么(包括软件和服务):

  • IntelliJ IDEA2017.1 旗舰版(非常重要,因为社区版(IntelliJ IDEA CE)没办法添加tomcat Service 由于JetBrains破解器的存在大家可以比(si)较(wu)顺(ji)畅(dan)使用官网下载的版本—>当然还是请大家支持正版!)
  • Tomcat 7.0.78
  • 万域网上购买的一个域名(还没用到)–>几乎没用,因为服务器很贵!
  • 暂时是这些…

1.1 IntelliJ IDEA 2017.1 web开发的前期配置

在这个部分,windows和mac基本操作一样,具体的流程可以参看大师兄的IntelliJ web开发教程

2开始写一个网站

借着课程的东风,我终于把一个非常简易的网页写出来了。(所以如果不是作业要求,自己写一个网页果然是不现实的…)
这是我的网站,因为是课程作业,所以确实是比较僵硬一点,多媒体也是我乱选的…

2.1 设计

设计上可以参考Hexo主题,挑选一个自己喜欢的风格
我选择的是next主题的性冷淡风格,在标志上选择了peanut(应某位同学要求…)

2.2 语言

2.2.1 HTML

此处推荐的是W3School,从入门的html到html5都有,可以自学,html相对还是比较简单的。
HTML只有几个注意点:
1. 一定要用最新的规范,由于HTML规范的更新,原有的html4语言很多都被淘汰了,诸如frameset之类的一定要用iframe替代;
2. 语言格式要统一,style放到css里,块的放置要规则,这样维护起来才方便;
3. head部分要严谨,尽量把元信息都著录进去。

2.2.2 CSS

勉强用了点,不是很懂,之后再更新

2.2.3 js

还没学,之后在更新

3 发布网站

域名其实还挺便宜,主要是为一个个人博客支付一年好几百的服务器费用实在是对我们穷学生的财政打击。因此我决定搭建一个本地服务器,看看后期可不可以把域名挂过去。
17.8.15更新:这个网址现在用在hexo博客上了,暂时先把github仓库当做我的服务器体验一下吧。
17.12.8更新:coding.net作为中国的github真的挺好用,为了不和我的hexo撞,我把自己写的放在coding.net上了,而且可以给每个项目都生成静态页面哦~

4 Tip

tip1: 在更新源码后刷新显示,按一下这个就好

deploy all

5 一个偷懒的做法(Hexo+Github)

通过Github和Hexo制作一个轻量级博客

如果你要配置git,你可能会用到这个流程,可能出现的问题都写的比较详细了,就是最后连接git@github.com的部分直接yes就好,不用考虑是不是和你的秘钥匹配。

利用Github和Hexo已经完成了,还没放内容。
流程可以参看Grok,如果遇到问题可以查询hexo常见问题解决方案,但是解决方案里有个小错误,下载git-deployer的时候用的命令行应该是

$npm install hexo-deloyer-git --save

更新hexo博客的方法

hexo博客创建好就自带了一个更新方法,但是那个要等server响应有点慢,图形界面的操作流程如下:
1. 在本地的_posts文件夹下创建一个Markdown
Mac上推荐Macdown,Win下推荐作业部落的在线编辑器,作业部落的md自带mac预览目录栏非常适合交作业。
2. 放到GitHub上的用户名.github.io仓库里
3. generate+deploy

$hexo generate
$hexo deploy

如果你要删除,那么在本地_posts文件夹和仓库里删掉这个文件重新generate&deploy,很快就可以刷新页面看到新的内容啦~

hexo文章插入图片

简单来说只需要按照github仓库里的路径描述你的图片文件地址就可以,for example:

![图片的名字](图片的路径,如images/smirk.jpg)

插入以后的图片是默认居中的,如果有别的要求…umm…直接修改一下css吧

hexo修改域名

参看hexo博客之域名配置,非常简单

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值