Site construction process
1. Buy a domain name;
2. Buy a server;
3. Domain name filing and server filing;
4. Website filing (National Internet Security Management Service Platform: http://www.beian.gov.cn/portal/index.do );
Remarks:
The domain name and server must belong to the same person, and it is best to buy from a service provider.
For domain name and server filing, you can use the filing service of Alibaba Cloud or Tencent Cloud, and file it where you bought it.
Submit the website for record review. Open the URL must have content, and blank pages cannot pass the review.
About design
1. Design by yourself. Even if you can operate ps proficiently, design ideas are still a big problem.
2. Ask a design colleague or friend to help design, you help him write a web page, he will do the design for you, and work together. If they refuse, they can only go on their own.
3. Using the style framework, I chose bootstrap.
Homepage design
Use FSCapture to cut the long picture, but unfortunately the operation is not proficient. I didn't cut the webpage address bar together. It would be better to have the address bar.
Design Interpretation
1. Less is more. Streamline the introduction of personal skills and experience, and minimize other text.
2. The eye-catching Hello World resonates and creates a sense of familiarity and belonging. What you do is self-evident.
3. Self-made keyword floral background image, original, deepen the impression of visitors.
4. The bust adopts formal and frontal photos to echo the purpose of the website. Everything is for better work.
6. Abandon the traditional navigation pictures or icons that fit the business meaning and use unique paper-cut animal heads, which is purely a personal hobby.
5. Use a large black background to match the background color of the picture to catch up with the trend of dark black UI. Read the article that dark colors are more power efficient on mobile phones and are more friendly to people with weak colors.
About development
One find is very interesting, the background image can be displayed through the margin, but not through the padding.
Home source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>木木的小木屋</title>
<meta name="keywords" content="木木，小木屋，小屋，木木的小木屋">
<meta name="description" content="个人博客">
<link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link href="css/common.css" rel="stylesheet">
<script src="js/vue.js"></script>
<!--vue兼容文件 polyfill-->
<script src="js/polyfill.min.js"></script>
<script src="js/vueComponents.js"></script>
<style>
body{
background: #fff;
}
div.header{
width:100%;
text-align: center;
background:url('img/bg.png') no-repeat;
background-size: 100% auto;
overflow: hidden;
}
div.header img{
width:200px;
height: 200px;
margin-top: 120px;
margin-bottom: 120px;
overflow: hidden;
border:1px solid rgba(94,94,94,0.1);
}
div.main{
background: #000;
color: #fff;
margin-top: 20px;
padding:40px 20px;
}
div.thumbnail{
width:250px;
margin-right:20px;
margin-left:20px;
}
</style>
</head>
<body>
<div id="root">
<div class="header">
<img class="img-circle" src="img/my_200.jpg" alt="图片"/>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>穆金秋</p>
<p>web前端开发</p>
</div>
</div>
<vue-customer></vue-customer>
<div class="main flex-box">
<div class="thumbnail">
<img src="img/xiongmao_242.jpg" alt="图片">
<div class="caption">
<h3>博客</h3>
<p>专业技术博客分享</p>
<p><a href="blog.html" class="btn btn-default" role="button">查看更多</a></p>
</div>
</div>
<div class="thumbnail">
<img src="img/shizi_242.jpg" alt="图片">
<div class="caption">
<h3>微信公众号</h3>
<p>微信搜索 -> 发现惊奇</p>
<p><a href="weixin.html" class="btn btn-default" role="button">了解详情</a></p>
</div>
</div>
<div class="thumbnail">
<img src="img/hu_242.jpg" alt="图片">
<div class="caption">
<h3>我的社区</h3>
<p>社区生活分享</p>
<p><a href="404.html" class="btn btn-default" role="button">去看看</a></p>
</div>
</div>
</div>
<vue-footer></vue-footer>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
new Vue({
el: "#root",
data: {
},
methods: {
}
})
</script>
</body>
</html>The story behind the design-about inspiration
In the beginning, there was no design, just a text outline, just think about it. I started to draw the page in Ink Knife. Due to the limitations of my front-end development, the design draft is quite well-formed, very traditional and old-fashioned, and it is only content typesetting without UI. I am very impressed with the personal station of the author Su Jie, who is a product manager. The main color is black, white and gray, like an open book. So I plan to learn from that style.
I opened the ps in the middle, and then I think about it and forget it, let alone the unskilled operation, the aesthetics are not as good as the serious designer.
If you don’t design yourself, just go to the Internet to look at other people’s designs and think about it for reference.
During the search process, I saw a designer’s personal website. Wow, a designer has built his own website. I only have this idea now. It's really the same. From this, I thought that I could find a design friend to cooperate. I had already negotiated, but suddenly there was no more information.
I also saw a nice and fun 404 page in the search. I downloaded the source code. Haha, this is the source of the background image of the text on the homepage. Looking at the full screen of 404, I suddenly thought of changing 4 and 0 to the key I want. Words, screenshots come after running the code, as witty as me.
The special background image + bust is the design style of many personal stations. The bust also specially selected a photo of the front face wearing a formal suit, which is also very suitable.
Drawing on the idea that less is more, the text on the homepage is as concise as possible. When I first looked for a job, I would write in my resume what language I would speak and what projects I did. Now, I don’t want to say it anymore, at least I won’t put it on the website.
If there is less text, there must be pictures. Simplified my business design, I need at least three pictures for navigation.
Which picture should I choose, is it a picture or an icon? Or use irrelevant pictures, just to look good and special?
The 3 selected pictures were seen when I browsed Moments earlier. I liked them very much at the time. Download and save them on my phone. There are 7 or 8 pictures. I used Meitu Xiuxiu to cut it to the right size. I made 6 of them and 3 of them were spare.
Because the background of the picture is black, I don't want to cut out the picture. The white paper cuts very well with the black background. Changing the color doesn't look good. I think of an article I read before, about why the UI design has become popular in dark black. Before reading this article, like MacOs update, when there is a black theme, my colleagues are very excited, I am not at all because I like white. After reading this article, I realized that dark colors are more power efficient on mobile phones and are friendly to people with weak colors. In that case, let me catch the trend too, haha.
The design is still short, so I chose the bootstrap style framework.