设为首页|收藏本站|
开启左侧

[问答] 新手小白打算建个个人网站,该如何入手?

[复制链接]
24509 20
站台的游戏 发表于 2020-6-2 21:00:46 | 只看该作者 打印 上一主题 下一主题
 
1.你是想给来做哪方面用,宣传形象、卖产品、自己玩玩... 2.有没有预算,别人好给你做推荐...


上一篇:做个网站都有什么流程?
下一篇:国内有那些好的网站建设公司?
@



1.西兔生活网 CTLIVES 内容全部来自网络;
2.版权归原网站或原作者所有;
3.内容与本站立场无关;
4.若涉及侵权或有疑义,请点击“举报”按钮,其他联系方式或无法及时处理。
 

精彩评论20

正序浏览
跳转到指定楼层
沙发
moskom 发表于 2020-6-2 21:01:39 | 只看该作者
 
1、明确需求
是个人博客、论坛社区、地方门户还是网上商城或者其他的
2、选择建站CMS
比如WordPress、DedeCMS、Typecho、Discuz!等
3、购买域名
Godaddy、阿里云、腾讯云都可以
4、购买主机
免费虚拟主机 - 优网主机 - 安全稳定、简单易用!5、安装程序,具体教程如下
如何搭建网站?通用教程领免费主机记得点赞
回复 支持 反对

使用道具 举报

 
板凳
youngjune 发表于 2020-6-2 21:02:16 | 只看该作者
 
建立个人网站从未如此简单:25个优秀个人网站设计模板一步到位



本文我整理了25个优秀个人网站设计模板,你会发现,原来不用编程,也不用自己设计界面,各式各样取之不尽的主题就是你的网站UI,建立个人网站原来可以如此简单。


在《老外的个人网站原来是这样设计的:17个最佳范例给你灵感》一文中,我和大家分享了17个优秀个人网站范例。相信看过的朋友一定会被这些精美独特的网站深深吸引,是不是也想要建立一个专属于自己的个人网站呢?看见美丽的事物,想要创造出同样美丽的事物是人之常情。但你也许会说,不会编程,不会UI, 时间也匮乏,怎么建立自己的网站呢?一些朋友也许就此望而却步。那就真的太过遗憾。


别担心,本文我整理了25个优秀个人网站设计模板,你会发现,原来不用编程,也不用自己设计界面,各式各样取之不尽的主题就是你的网站UI,建立个人网站原来可以如此简单。

同样,本文中我会按照个人网站的常用类别展开:

1. 作品展示型个人网站 - 类似于Dribbble和Behance等平台,设计师展示个人作品,但个人网站主动性和功能性更强更丰富;
2. Blog风格的个人网站 - 设计师分享自己的设计理念和想法,交换信息,吸引粉丝和关注;
3. Online shop型的个人网站 - 此类个人网站会有商业用途;
4. 简历型个人网站 - 优化传统简历,更好的呈现自己的作品和技能,找到更好的工作;
5. 个人摄影网站 - 展示平面设计师,摄影师等的作品,是作品集网站的一种;
6. 通用型个人网站 模板 - 可适用于多种类型。


此外,个人网站还有不同的制作工具和主题,比如基于HTML编辑器,基于Flash互动网页制作工具,使用Website Builder直接设计,Wordpress主题等等,我也将在每个推荐里展示出来,提供选择。


一. 作品展示型个人网站模板


1)John Doe - 基于HTML5 的单页免费作品集个人网站模板


特点:
使用最新的CSS Framework- Bootstrap创建
流畅的CSS3 动画效果和jQuery插件.
完全的可自定义编辑
响应式界面设计
Google字体
同样适用于blog类型的个人网站设计


 第1张图片

John Doe尤其适合自由职业设计师的作品集个人网站制作,可以充分展示自己擅长什么以及想做什么,也可以展示自己以前的作品或项目。 界面设计富有创意且优雅。 只需一分钟,你就可以了解该模板是如何使用,及其简洁方便。


这里已经有一些使用该模板制作个人网站的真实案例:


Link 1: MARK DAVIES – IT CONSULTANT
Link 2: http://qarniest.com/
Download here.


2) Assemble - 专属的作品集设计模板


特点:
18个美观的主页,单个项目模板,以及无数的作品集设计布局。
酷炫的菜单样式和出色的悬停效果。
可编辑的内置页面和响应式设计。
完全兼容于电子商务广泛使用的免费WooCommerce插件。
也适用于个人博客网站设计。


 第2张图片

Assemble是一个免费的在线作品集设计网站,可以将您的设计作品以一种完美的方式展示出来。它包含18个美观的主页供您自由选择,随心设计,打造专属的个人作品集网站。


Download here



3)Instant - 免费的响应式作品集个人网站模板


特点:
包含3页的WordPress主题模板。
使用Bootstrap 3构建。
全屏幕和视差背景。
适用于多种浏览器。
精美字体。


 第3张图片

Instance是那些才华横溢的专业设计师建立个人网站的不二选择。设计精美,界面干净,极具创意。包含精心设计的HTML5 Bootstrap模板。 它是专门为个人作品集网站建设而设计的。最重要的,该模板完全免费!


用户反馈:“ Beautiful work. A cure to poorly designed eye-sore websites. Thanks for your work!! ” - Daniel Ekal.


Download here.


4) http://Template.net - 作品集展示模板


特点:
基于HTML5构建。
100%可自定义编辑。
紧跟新设计趋势并且极具独特风格。
包含作品集,简历,商业用途等网站模板。
http://Template.net 提供丰富的个人网站模板,包括可用于展示产品的设计,作品集或插图。尤其作品集模板的创意主题被广泛使用。这个基于HTML5的作品集模板为设计增添了独特的触感,可以帮您丰富网站创意。


 第4张图片

Download here.


5) Erika - 轻量型的个人作品集网站模板


特点:
基于Bootstrap 3.x创建。
完全的响应式设计。
包含页面模板。
包含HTML&CSS&JS文件和有效的 HTML5 / CSS3。
8 个主页模板,3 个标题样式,24 个作品集设计选择,以及55 页面模板。
包含Ajax的动态PHP联系表单。


 第5张图片

这是一个包含8个主页变体的多页面个人网站模板。 编码良好,你还可以将其轻松的转换为WordPress格式。在干净的白色背景上,文字和其他网页元素清晰可见,您可以清晰地展示您的作品。用户可以轻松地在页面标签之间切换,以查看您的作品集。悬停效果和其他动画效果非常酷炫。


Download here.


6) Martin - 极具创意的单页网站模板


特点:
基于Bootstrap最新版本创建。
包含HTML5,CSS3,jQuery。
完全的响应式设计。
免费更新。
SEO优化良好。


 第6张图片

Martinis 是一个简单,富有创造性和完全可响应的HTML模板,可用于展示您的作品集和个人信息。该模板中使用了所有的现代技术,比如HTML5,CSS3,bootstrap和jQuery。该模板可以给你一个个人空间,无论是设计师,开发人员,摄影师,都可以在这里进行创意设计。


Download here.



二. 个人博客网站模板


1)Pofo - 创意Html5 / Css3博客网站模板


特征:
快速页面加载。
免费更新。
极佳的创造性和互动性,灵活强大的HTML5 / CSS3模板。
25个以上的主页演示,包括一个页面主页,210多个HTML页面,150多个不同风格的独特元素。


 第7张图片

您可以使用Pofo中不同的列表样式构建一个专业的博客界面,还可以自己制作博客和画廊,或者使用Slider Revolution设置图片里的任何内容。使用Pofo创建博客的一个优点是一切都很简单。它易于浏览(简单,干净的图像框和文本框),方便阅读(直观的博客文章页面样式)。页面加载速度快,并在搜索引擎上进行了优化。


Download here.


2)Free CSS - 多样化博客模板


特征:
各种博客模板主题。
基于HTML5构建。
响应式设计。
也可以用于摄影作品集和商业博客。


 第8张图片

Free CSS是一个不同主题的博客模板的大集合。每个主题都有特殊的功能和特色,是一个分享您的想法和写作的好地方。只需选择你最喜欢的一个主题,就可立即创建一个个人博客网站。所有主题都是就免费的!


Download here.



3)Ablogia - 个人博客网站模板


特征:
基于Bootstrap 4.0.0-beta创建。
基于HTML5&CSS3构建。
现代且极具创造性的设计。
W3C有效的HTML。
完美像素。
800多种Google字体。


 第9张图片

Ablogia是一个简单,干净且优雅的博客模板,使用现代技术,如最新bootstrap,html5,css3,jquery等建立了这个模板。界面非常干净。


Download here.



4)Creativemarket - WordPress博客主题


特征:
超过960个WordPress博客主题。
基于Bootstrap 4.0.0-beta创建。
用HTML5&CSS3构建。
搜索引擎优化。


 第10张图片

该模板包含了近千个WordPress主题。您可以体验流畅的博客网站加载和页面切换。博客主题与白色和浅蓝色形成鲜明的对比,你想要展示的信息会清晰呈现。该模板的建立基于最新的HTML5和CSS3技术,并有搜索引擎优化。您可以选择将主题翻译成多种语言,且适用于所有浏览器。


Download here.



5)Read Personal Blog Template


特点:
用bootstrap构建。
响应式设计。
干净的布局。
完整的文档。


 第11张图片

Read是最轻量化的个人博客设计模板。有干净的界面和响应的主题。 它适用于任何种类的个人博客网站设计,比如旅行日记或教程博客。


Download here.


三. 个人电子商务/网店网站模板


1. Preface - 免费的响应式网站模板


特征:
响应式设计。
基于Bootstrap和jQuery创建。
W3C有效的HTML5和CSS3。


 第12张图片

Preface是一个质量一流的免费个人网站模板。完全响应式设计,UI界面设计高级具有质感。这个免费的个人Bootstrap模板具有高质量的设计和代码。它充分响应,可用于商业和个人推广目的。免费下载!


Download here.



2)Jevelin


特征:
一键式网站安装。
拖放元素即可的页面生成器。
社交共享功能。
搜索引擎优化。
多语言和RTL支持。
终身更新和用户支持。


 第13张图片



Jevelin是一个响应式的WordPress主题模板。不需任何专业背景,对于非程序员或忙碌的人来说是最合适不过的。它拥有有大量页面元素可供选择。 贴心的是,提供视频教程来指导你。它使用拖放页面生成器和MegaMenu来简化许多面板任务。Jevelin本质上是多用途的,适用于多种浏览器或各种设备。Jevelin也拥有优化的SEO导航。


Download here.


3)Kards - 免费的个人网站模板


特征:
充分响应的HTML5和CSS3模板。
极具现代感且干净的设计。
时间轴项目。
易于自定义。
兼容所有主流浏览器。

 第14张图片

Kards基于Bootstrap框架设计,是个人作品集,博客或商业用途的最佳模板。 组织有序的代码使它很容易进行自定义设计和使用。它的创意设计可以吸引客户到您的网站,使其成为您的业务合作伙伴。 该模板跨浏览器兼容,完全免费。


download here.



四. 个人简历网站模板


1) CVstrap - 免费的个人网站模板


特征:
响应式设计。
基于Bootstrap 3构建。


 第15张图片

CVSTrap在众多的模板类别中是独一无二的。 这是一个免费的简历型HTML5模板,使用该模板,创建一个满意的简历个人网站只需不到一个小时。


Download here.


2)Juleha - 单页简历模板


特征:
用Bootstrap构建。
多样的字体选择。
动画标题。
基于HTML5和CSS3创建。
完美配色方案。
Ajax联系表单。
轻松自定义。


 第16张图片

Juleha是一个简洁干净的单页简历模板。 支持的浏览器包括IE 10+,最新的Firefox,最新的Chrome,最新的Safari,最新的Opera等。


Download here.



3)Easy Resume – 免费的响应式模板

特征:
用Bootstrap 3构建。
包含HTML5和CSS3。
包含JavaScript和jQeury。
单页多层布局设计。
Google的移动设备测试。
跨浏览器兼容。


 第17张图片

EASY RESUME是一个Bootstrap响应式网站模板。设计特别,具有令人印象深刻的视频横幅。 这个完全响应式的模板是使用HTML5,CSS3和Bootstrap框架设计的。 特色设计之处在于:颜色,图像,悬停动画,平面网格模式,视频背景等。该模板完全免费。


Download here.



五.个人摄影网站模板。


1)Click - 免费的响应式的个人作品集网站模板


功能:
全屏幕标题背景。
跨浏览器兼容。
流畅的CSS3动画。
100%的搜索引擎优化。
100%完全可自定义设计。
用HTML5和CSS3构建。
Bootstrap前端框架。


 第18张图片

Click是一款干净免费的HTML5 Bootstrap模板,专为个人摄影作品和专业摄影展示设计。该模板由提供者精心设计,强调排版和整体用户体验。不同年龄阶段的设计师或者摄影师都可以在这里展示自己的作品。所有服务完全免费!


Download here.


2)Liza Photography - 令人惊叹的摄影网站模板


特征:
9令人惊叹的画廊布局。
全屏图库支持。
多个菜单布局。
用HTML5和CSS3构建。
强调排版和可用性。
具有650多种Google字体的高级版。
免费终身更新。


 第19张图片

该模板是一个优秀的HTML网站模板,您可以创建一个专业的作品集网站并且创建一个博客。 该模板有各种各样的画廊,如网格等,可以很好的展示您的摄影作品。


Download here.


3)SELFIE - 个人摄影师HTML模板


特征:
响应式布局。
滑块介绍方式。
Instagram资讯介绍。
Html 5和CSS3。
包括一个页面布局。
包括博客单页和博客详细信息页面。


 第20张图片

SELFIE是一个极具现代感的摄影师网站模板。专为摄影师设计,可以显示您的照片库。该模板具有独特和现代的页面布局,提供了一系列的多设计和多布局选择。该模板是完全响应式的,并已针对平板电脑和智能手机进行了优化。


Download here.


4)Opta - 最轻量的的作品集和摄影HTML模板


特征:
响应式布局以适应任何屏幕尺寸。
简单的图像滑块和文本滑块。
Google Web字体。
PHP联系表格。
任何时候都可以直接向模板开发人员获得一流的支持。


 第21张图片

Opta是一个简约的作品集和摄影HTML模板。使用此模板,您可以只用几个步骤就能创建一个惊人的网站。该模板灵活且易于定制,并且是响应式布局。


Download here.


六. 其他通用型个人网站模板


1)Awesome - 免费的响应式个人模板
Download here.


 第22张图片

2)Wix - 强大的个人网站生成器和模板提供者


Download here.


 第23张图片

3)Universal - 轻巧的智能化html5 模板


download here.




 第24张图片

4)Unibody - 多功能多页面的HTML5模板


Download here.


 第25张图片

借助这些模板,往往不需要花费过多的精力就可以自己创建一个个人网站,甚至不用一行代码,就连UI也有付费和免费的主题可以一键搞定。希望这些优秀的个人网站模板能给您设计网站提供帮助。但是如果你还是想要拥有独一无二的个人网站,设计师只有去真正的进行创作和设计。你需要好的设计灵感,一点一点打造,这里推荐您使用国内最好的原型设计工具Mockplus进行初步构思,把界面和元素进行整合排版,并且搭建相应的交互。最大的优点是你可以在网页进行HTML演示,在线查看您的构思是否合理,设计是否美观,这对后期的设计和开发都将大有裨益。
相关阅读:

干货!2018年你值得一看的网页设计作品集赏析
网页设计有难题?12款网页设计模板给你灵感!
极简网页设计技巧,打造简约之美
网站设计缺乏创意?视差滚动网站设计让你与众不同
设计类网站的“联系我们”页面设计盘点
网站着陆页设计,让用户开心着陆的10大技巧!
收集网站用户反馈的5个常用问题
时尚的不仅仅是它们的服装,还有它们的网站设计
这9款小众时尚的酒店网站设计,让你不再恋家
10个最新交互式Web设计实例欣赏
Mockplus 做原型,更快,更简单!
回复 支持 反对

使用道具 举报

 
地板
柚子绿茶控 发表于 2020-6-2 21:03:13 | 只看该作者
 
有网友留言想看看,如何搭建博客,今天他来了(liao)。这是一个搭建WordPress博客网站的教程,内容会很细顺便科普一下相关概念,小白也不用怕,相信我,你肯定听得懂、做得好。
为什么搭建博客?
想先说一下这个古老的东西“博客”,有人说博客已经过时了,现在大多数人都用手机看朋友圈、微博等。是的,但是每当从google或者百度上找到一篇优质的资料我发现是出自个人博客的概率很大。曾经问过一个大佬在学习上又没有什么习惯或者技巧,他说“我每当解决一个问题之后都会总结并记录下来”。是的自己也深有体会,每次google半天解决的问题,不做记录的话过一段时间再遇到一样会去google半天去找,可能这就是平常人与大佬们的区别吧。最后用在一个个人博客上看到的一句话来开始这篇文章“对任何渴望进步的人来说,写博客/文章/回答对自己的成长帮助都是巨大的。频率和数量不必过分强求,有话要说就写写,没事就歇歇,随意点。因为坚持写作的那一刻起,你就已经开始受益。
Web 科普:
web其实我们几乎每个人都用过,我们肯定都用过百度。但是你知道当你把域名 http://www.baidu.com 输入浏览器回车后都发生了什么吗?
1、浏览器并不知道访问http://www.baidu.com要去找哪个服务器,而是通过我们电脑上配置DNS服务器要答案
2、DNS服务器上记录着http://www.baidu.com 对应的服务器的IP,IP是唯一的,DNS会把对应的IP告诉浏览器
3、浏览器根据DNS返回的IP地址去找服务器请求数据,服务器返回数据到我们的浏览器


 第51张图片

WordPress:
WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。全球约34%的网站都在用WordPress、小到兴趣博客、大到新闻网站,国外的学校里甚至都有WordPress相关的课程。在中国WordPress没有在国外那么火,但是依旧力压群雄,国内有不少网站都是用的WordPress,比如数字中国,爱范儿等。另外WordPress有着将近50000个扩展插件和5000个主题模板,使用WordPress甚至可以搭建一个社区或者商城。
准备工作:
1、域名 (例如http://baidu.com,Godaddy、万网、腾讯云、百度云都可以)
2、主机(Web服务器,用来存放网站程序、图片等,教程用的是优网主机的博客主机标准版)
3、WordPress程序 (在http://cn.wordpress.org下载,优网主机内置WordPress就不下载了)
大概步骤:
1、购买域名
我在阿里云万网注册了一个域名 youweb.online
2、购买主机
我在优网主机买了一个博客主机标准版,购买的时候需要我们填写一个域名,这个域名以后也可以自己修改。


优网主机 - 安全、稳定、简单、易用  第52张图片 3、解析域名
也就是在DNS服务器白自己的域名和主机的IP对于关系记录起来,先找到自己主机的CANME地址,如图打码的部分  
 第53张图片 到域名服务商找到域名解析的入口,添加2条记录。如图所示主机记录分别为WWW和@ 记录值是CNAME地址,如果你的域名服务商不支持把@主机记录用CNAME方式解析,就用A记录,记录值填写IP地址
 第54张图片  第55张图片  第56张图片 4、配置SSL
域名解析完成其实网站就可以访问了,主机内置了WordPress。但是浏览器会有安全提示,因为我们没有安装SSL安全证书。
 第57张图片 优网主机的主机管理面板内置一键申请SSL安全证书的功能,我们只需要一键申请证书即可,不用去购买再手动配置了,而且可以自动续期哦,这个很赞!
 第58张图片  第59张图片  第60张图片  第61张图片 到这里我们的网站就已经可以正常访问了
 第62张图片 5、登陆WordPress管理后台
要登录后台先登录主机管理面板,主机管理面板深度集成了WordPress管理,可以一键登录WordPress管理后台,修改WordPress登陆信息等。
 第63张图片  第64张图片 后台地址是:你的域名/wp-admin/
 第65张图片 总结:
WordPress博客网址到这里就搭建完了,因为优网的博客主机内置WordPress,我们就没有去http://cn.wordpress.org下载,手动上传到主机,这个教程并不适合所有的主机,仅供参考。
最后想给动手做成功的朋友一个方向,搭建WordPress博客网站并不难,后面要做的是优化一下WordPress(不然速度可能会慢),设置导航,模板什么的。我博客里也会同步关于WordPress的教程,更多内容可以访问我的个人博客。


自媒体张 - 把喜欢的事做好,给喜欢的人带来欢笑!各位贵在坚持,持续的输出优质内容才应该是拥有一个博客之后应该做的事情。如果喜欢这篇文章的话,关注我,为认真的人点赞。
回复 支持 反对

使用道具 举报

 
5#
bbspop 发表于 2020-6-2 21:04:01 | 只看该作者
 
看了大家的回答,内容过多,对于新手来说,可能不够友好,建立个人网站主要分以下几步:
1、域名
域名自不必说,就像我们访问百度,我们需要在浏览器地址栏中输入  baidu.com ,域名在某种程序上来说是网站的名片,好记、朗朗上口的域名更容易吸引用户。
国内购买域名常用网站有两个:阿里云,也就是之前的万网;腾讯云,也就是之前的dnspod,现在大部分的短域名或者双拼域名都被抢注一空,所以注册域名时要考虑自己网站什么内容,根据网站内容来选择域名更容易被记忆。
如果计划选择国内的云主机,需要进行域名备案,阿里云和腾讯云均有域名备案平台,购买完域名和云主机后,可以直接进行备案。既然是个人网站,域名实名认证和备案主体都选个人就OK,方便快捷审核快。特别提醒:域名备案的备案服务号需要有服务器才可以生成,并且要求服务器购买不低于3个月,请各位知悉。
2、程序
网站程序这块,个人站点一般选择织梦CMS或者wordpress,相对来说织梦CMS更简单,wordpress更强大,当然展示效果的好坏还跟选择的主题模板有一定关系,如果需要主题模板,我们可以去织梦猫或者百度搜索织梦CMS模板、wordpress模板即可。
主题模板这块,我们不再细聊,百度一搜一大把,可以随意选择,并且提供完善的安装教程,对于新手来说,上手并不难。
3、服务器(空间)
服务器:已然2020年了,虚拟主机的时代已经过去,云服务器才是王道。至于虚拟主机与云服务器有什么不同,大家可以参考之前的链接:
请问一下各位大佬,服务器、云服务器和虚拟主机有什么区别?那么服务器该如何选择呢?
搭建个人网站,前期对服务器要求相对较低,1核2G1M带宽的服务器就足够使用;我们可以选择云平台的活动云服务器,作为个人的首台云服务器,例如腾讯云最近主推的云服务器秒杀活动,1核2G1M带宽低至95元/年,是个人建站的不二选择,腾讯云活动链接可参考:
腾讯云618云聚惠1核2G低至95元4、备案
网站部署使用中国大陆的服务器,备案是必不可少的一步,如果购买了腾讯云的服务器,可以参考腾讯云官网的备案流程进行备案,具体备案流程如下:
网站备案 如何快速备案您的网站 - 快速入门 - 文档中心 - 腾讯云网站买好了,那么该如何搭建运行环境呢?网站买好了,那么该如何搭建运行环境呢?网站买好了,那么该如何搭建运行环境呢?网站买好了,那么该如何搭建运行环境呢?
网上搭建运行环境的教程一搜一大堆,但 对于新手来说,可能都略微有点麻烦,今天推荐一个工具,那就是宝塔面板,简单好用并且永久免费,面板安装并打开后,可以一键选择环境进行部署,也可根据需求手动选择对应的应用进行安装,并且宝塔面板在常用功能如首页设置、SSL证书配置等方面,都非常简单。
以上只是对新手建站做了概括性的描述,各位可参考流程进行网站搭建,如果遇到更细节的问题,欢迎留言咨询,如有有不同意见,可以留言讨论。
回复 支持 反对

使用道具 举报

 
6#
星叶小草 发表于 2020-6-2 21:04:30 | 只看该作者
 
http://www.cnblogs.com/winroot/archive/2012/02/07/2341807.html
以往大部分的创业者,在前期资金紧张、人力缺乏的情况下,很难去建设一个高速、稳定、美观的产品网站。云时代的到来,将很多在以前遥不可及的服务,逐步以近乎免费的形式提供给个人用户。笔者将苦逼的经历整理了一下,来描述如何用“云”,快速创建产品网站。

希望能给刚刚起步的苦逼的创业者一些帮助。

1、 家喻户晓的域名:
怎么家喻户晓那是你的事情,
购买途径推荐http://www.godaddy.com。为什么?价格便宜,还有NameServer可以免费设置,不像DreamMonster虚拟主机一到期,连Nameserver都不给用了,当时我们http://sukikits.com就在这个上面郁闷了一下。而且支持支付宝
具体的注册过程可以baidu搜索“godaddy注册”。
2、 空间是根本:
1、 最好是国内的。
2、 空间不需要太大,几百兆就够了,你的产品网站没那么多内容。
3、 建议购买Apache为WebServer的空间,后面做页面静态化需要。
4、 尽可能挑一些口碑好的空间提供商。因为你在购买前给你演示速度的网站,跟你拿到手的时候速度会有天壤之别。
3、 域名备案
没有这个号码,你的网站将没有任何竞争力,不论你的产品有多么的优秀。在这片神奇的土地上你必须做的事情。当然空间商会帮你提交,你只需要填写资料,准备好电子版的照片,一定要填写能联系到你的手机,通管局会给你打电话确认信息的。
4、 伟大的DNSpod
为什么要DNSpod


用下来就是快,最初我做过对比,比我的的域名服务上提供的解析速度快。
最重要的是在快的前提下,而且免费。


设置比较简单,文档见https://www.dnspod.cn/Support

5、 名片上的企业邮箱
弄好DNSpod以后我们就可以设置企业邮箱了。国内企业邮箱建议选择腾讯http://exmail.qq.com国外服务的话选择Gmail的吧。
我们选择的是腾讯的企业邮箱,比较方便,防止和墙发生不愉快的事情。


注册完成后会有引导内容,按照引导进行设置就可以了。帮助页面http://service.exmail.qq.com/。
这样你就可以有自己的域名后缀的邮箱了,比如我的邮箱leon@sukikits.com就用的是腾讯企业邮箱。

6、 主题不是问题
如果你想开发强大的网站功能请忽略这里。
下面介绍的是要建立一个产品介绍的网站。
看你的需求,如果你想快速简单上手,wordpress就可以满足,如果你喜欢折腾那你去研究joomla或着Drupla。
为什么选择Wordpress。
快速、简便、基本满足一个产品介绍类网站的需求。各类插件、模板丰富。
还有一个最主要的原因:用的人多,遇到问题随便搜索就可以找到解决方案。
那么下面开始说一下模板的选择。
http://www.elegantthemes.com/
http://themeforest.net/
到这两个网站去挑选你喜欢的模板吧。版本的获得方法要么购买要么百度搜索。
模板选择注意点:
a.       选择一款发布时间稍长
b.       下载或者购买量较多
c.       契合你心目中网站风格的。
这样的次序主要是对网站的兼容性、性能、以及你自己使用的便捷性都会有较好的保证。
说白了用户体验为王!
来看一下http://sukikits.com的后台


主题建议先试用再购买。

7、 速度才是王道
分为两部分:
a.       图片访问加速
第一步,找一个云存储推荐又拍云存储https://www.upyun.com/是按照访问流量计费的。说白了就是一个单独的图片CDN 在页面加载的时候不用访问你那“共享百兆”流量的空间。
第二步,修改你DNSPOD,在里面增加一个CNAME 如http://image.sukikits.com。具体设置会有引导。帮助见http://www.upyun.com/intro/custom.php


第三步,尽量将你内页或者主题内的图片连接使用你指向又拍云存储的连接。
另外有一个又拍云的插件可以批量转化。
下载地址:
http://ihacklog.com/php/wordpress/plugins/hacklog-remote-attachment-upaiyun-version.html

b.      页面静态化
使用这个插件:WP Super Cache。
下载地址:http://wordpress.org/extend/plugins/wp-super-cache/
为什么要用:
引用一下百度的搜索“WP Super Cache 是WordPress官方开发人员Donncha开发,是当前最高效也是最灵活的WordPress静态缓存插件。它把整个网页直接生成 HTML 文件,这样 Apache 就不用解析 PHP 脚本,通过使用这个插件,能使得你的WordPress博客将显著的提速。”
设置帮助文档:http://ooxx.me/wp-super-cache.orz
还有一个W3 Total Cache也可以试一下。哈哈


8、 高贵的CDN
http://webluker.com太可爱了,让CDN这个高级货,飞入寻常百姓家。而且每个月30G的免费流量配额,基本上小站是够用了。
CDN的定义见:http://baike.baidu.com/view/21895.htm
简单说来就是把用户访问网站时需要的资源放到访问比较快的服务器上。
简介“Webluker是一站式运维服务综合平台,为用户提供稳定,高效,灵活的服务。提供网站加速、域名管理、DNS解析、云主机、服务器监控、网站监控告警等功能。”


帮助文档:http://blog.webluker.com/

9、 监控是个宝
走到这一步基本上网站基础建设已经完毕。
这里我们开始设定网站的运行状态监控。其实前面提到的DNSpod和webluker都带有服务器监控。大家可以使用,同时我这里推荐一款专门做网站监控的网站,他可能更加专业一些。
推荐原因:免费、好用
监控宝:http://www.jiankongbao.com/



帮助页面:http://www.jiankongbao.com/faq

10、            数据统计
数据统计重要性我就不罗嗦了。
在我朝,就得用本地的东西。所以选择百度统计:http://tongji.baidu.com/
基本好用。Google的统计也是比较好用的。萝卜白菜各有所爱。
数据关系我就不截图了。。。。
这里有一些介绍:http://yingxiao.baidu.com/support/topic/3.html
记住忽略百度推广那些人给你打的电话。你是一个小站,没钱最推广。
回复 支持 反对

使用道具 举报

 
7#
922itachi922 发表于 2020-6-2 21:05:27 | 只看该作者
 
浏览了一下答案,感觉都没有对小白友好的答案,我来整理一下吧。
首先想要建立自己的网站,就需要一个可以连通外网的服务器。
为什么建立网站需要购买服务器呢,服务器是一种高性能计算机。说的通俗一点,用户浏览网页,其实都是浏览的这台计算机里的网页文件,所以这是你想拥有一个任何人随时随地可以都可以访问的网站,就需要一个24小时不关机的高性能计算机存储你所写的网页程序。
那么?我们需要买一个大铁箱子吗?
答案当然是不需要
因为有云服务器这种东西啊
如何购买云服务器呢?

以阿里云为例子,首先进入阿里云官网:https://www.aliyun.com/
 第81张图片

1、选择云服务器ECS点击购买。
2、然后你会看见计费方式分两种,有包年包月的,也有按量付费的,个人感觉包年包月比较划算。
3、服务器地域随意选择,没什么特殊要求的话,选择华北就行了。
4、其余的配置你就按最低的配置选就行了,如果是想做一个高流量的网站自然也应该选择好一点的配置
5、镜像选择注意了,我们这里选择Ubuntu16.04版本,64位做一下实验
 第82张图片

6、设置好登录密码,这里的密码就是你以后远程连接服务器的密码
 第83张图片

购买之后会分配一个你的ip地址
 第84张图片

然后你需要下载一个Xshell 5来连接你的服务器
 第85张图片

连接服务器的步骤:

第一步:菜单栏的 文件—新建
 第86张图片

第二步:在跳出的窗口中,主机填成刚刚的ip地址,其余不需要改变
 第87张图片

第三步:点击连接

 第88张图片

第四步:输入用户名密码
 第89张图片

 第90张图片

第五步:连接成功

连接成功后,在页面上我们依次输入下面的命令,注意不是一骨碌全输进去,而是一句一句输入,输完一句回车就行了,如果他让你选择y/n那你就选择y(yes)
apt-get update
apt-get install apache2
service apache2 restart
2.安装php
apt-get install php5
3.安装mysql
apt-get install mysql-server mysql-client
中途会让你设置密码,
然后我们就可以
service mysql start
最后,重启apache服务
service apache2 restart
到了这一步你就可以在浏览器输入您的ip访问你的网站了。
例如:
http://127.0.0.1
现在的访问页面是服务器的默认界面,然后怎么更改成自己想要的页面呢
你需要下载一个FileZilla Client
然后新建站点,就按着我这个填,连接之后进入/var/www/html目录,这个目录下有个index.html文件,替换成你的index.html文件就行了,因为默认的接受index.html

 第91张图片

 第92张图片
回复 支持 反对

使用道具 举报

 
8#
树下野狐大师傅 发表于 2020-6-2 21:06:12 | 只看该作者
 
我自己也做过很多网站,说实话,从0搭建一个网站,前前后后要做的工作真的不少。先看一下我做的一些案例吧。
0、2016.07 平面设计相信日记网(1.0版本,相当简陋,文章是纯代码写的,发文章效率太低。)
1、2016.12 平面设计学习日记网(2.0版本,网站封装了CMS系统,发文效率大大提高。)
2、2018.01 平面设计学习日记网-手机端(全局采用em做单位,确保手机端排版完美。)
3、2018.12 微专业栏目(第一次尝试媒询做响应式,兼顾了pc、pad、手机多个多设备终端。)
4、2019.09 张立涛Ai教程官网(加入了视频模组,采用响应式布局,拥有更加完整的体验。)
5、2020.01 XXXXX网(目前还正在建设中,第一次尝试将关键组件模块化处理)
我每一次做网页,都会尝试一些不一样的实现、或者新功能,这是让我保持不断开发新网页的动力,如果做一个完全一模一样的网页,我估计是要疯掉的吧。
由于篇幅原因,下面我只简单说一下个站建设流程,帮助大家建立起完整的认知,对于具体技术细节,大家可以结合搜索引擎,以及本回答提供的技术教程,查阅服务商提供的技术文档,逐一攻破。
一、建站流程

通常情况下,任何一网站的建立,都会经过“分析策划—交互设计—视觉设计—前端制作—后端制作—测试上线”6个环节。
下面标题中,写了(省)字的步骤,你可以利用成熟的CMS建站程序模版(比如wordpress)快速搞定。当你需要个性化定制时,就需要去去详细研究了。
1、分析策划

你的网站要放什么内容,网站的页面路径、网站栏目怎么安排,在这个阶段你需要想好。如果是做信息类网站,其SEO关键词布局要做好。
2、交互设计(省)

具体落实每个网页的展示内容、功能入口、以及各个页面之间如何相互跳转。你可以在A4纸上画一下,构思出你的网站线框图。(当然也可以借助XD、sketch这类交互设计软件来完成)
3、视觉设计(省)

借助专业的设计软件PS,完成网页的视觉设计。你要落实每个网页中的按钮、图片、文字、表单的色彩样式,尺寸大小等。最大程度上,接近用户最终看到的网页样子。然后输出图片资源,以备下一环节使用。
4、前端重构(省)

将上一步输出的图片资源,借助前端代码HTML、CSS、JS、JQuery重构【视觉设计】,让视觉设计稿变成真正可以在浏览器中访问的文档。
5、后端制作(省)

后端制作是用来处理网站数据的,增、删、查、改数据,都需要后端处理,通常需要专业的后端语言编程才能完成,比如Php、Java等语言,都可以用来写后台。
6、上传服务器

将你网站的代码程序、图片资源,上传到云端,让所有人都可以访问。在将你的网站资源上传到服务器资源前,你还需要做两个工作。
(1)购买服务器空间,并完成配置。
(2)购买域名。
(3)将购买域名解析到你购买的服务器空间IP。
此时用户就可以通过域名访问到你的网站了。
以上便是搭建个人网站的大概流程,借助开源的网站CMS程序,比如DedeCMS、wordPress,我们不需要懂代码,也同样可以做出网站来的。但是你需要学会安装模板,挑选一款适合自己的网站模板,然后专注网站内容策划,业务流程即可。
不过话又说回来,倘若你能懂些网页视觉设计、懂点Web前端代码、精通一款网站CMS系统的搭建使用,你也就具备了做出个性化网站的核心能力,这才建站的真正硬功夫!
接下来,我就在分享一些网页视觉设计、WEB前端代码、CMS系统使用的技术教程。相信对热爱新事物的你,一定会非常有帮助!
二、Web视觉设计-技术教程支持

用什么样的排版,或者富有创意的表现形式,才能如何更加高效的传达版面信息?如何规划页面路径?用什么样的颜色,以及多大的字号?这是新手学习网页设计应该画下的重点。
一个网页被设计出来,是给人用,给人看的。 要好看(简洁)、要好用(高效)这才是一个设计师需要反复考虑的。视觉+交互,是网页设计的核心竞争力。
 第105张图片 其中“视觉设计”的依据,源于前面的策划和交互设计。最后出具的“视觉设计稿”得符合品牌定位,满足生产运营、以及用户需求,这是网页设计师必修的基本功!学习网页视觉设计,可以参考的教程有:
1、《PS零基础入门教程》,掌握设计软件的使用。
2、《网页美工入门教程》,了解网页布局、切图基本知识。
3、《网页设计高级教程》,提升网页视觉表现能力。
4、《互动网页设计教程》,学习合成类网页设计的视觉表达。
三、Web前端制作-技术教程支持

前端制作在协作流程上,紧跟设计之后。这部分工作通常是由WEB前端工程师来完成的工程师通常会运用到HTML、CSS、以及JavaScript、jQuery等网页前端代码,来还原网页设计师的“视觉设计稿”,以及交互动画等。
“前端工程师”除了要配合网页设计师外,还要配合做后端工程师,做好网页端的数据收集处理等工作。学习网页前端制作,可以参考的教程有:
1、代码编辑软件Dreamweaver入门,精通掌握一款编程软件,事半功倍。
2、HTML+CSS网页前端课程,重构网页界面需要掌握的核心知识。
3、JavaScript+JQuery交互动效,Web前端编程核心知识,实现交互动效,优化体验。
4、Boostrap响应式网站开发+上线调试,从代码到域名空间、解析、上传源码及调试。
以上四个板块掌握精通了,基本上就能胜任80~90%的网站前端开发工作了,还有20%则需要自己去探索专研。
四、建站程序CMS-技术教程

CMS=content manage system,也就是内容管理系统的简称。市面上常见的CMS程序也有很多,其中wordpress、DedeCMS得比较广泛,相关教程资源也比较多,大家也可以尝试使用。
1、WordPress使用教程:用WordPress做网站系列课程!
2、DedeCMS使用教程:织梦建站基础+实战课程
除了上述视频教程外,你也可以参考查阅官方技术文档,解决实际开发过程中遇到的问题。基本上99%的问题,都能考搜索引擎解决。你并不需要畏惧什么,只需记住一个字:干。
五、欢迎阅读,我撰写的相关经验文章。

你是如何设计一个网站的?
网页设计稿完成后,如何在页面实现过程中(Web前端重构)保证字体效果和设计稿一致?
想弄个自己的网站,在校园发布点小东西,零基础?
平面设计学习日记官网V2.1隆重上线,平面设计自学者的福音!
自学网页设计,需要了解的网站开发流程
我相信,你要你肯专研,哪怕是从0开始,从设计到代码,再到上线,这都不是什么难事。毕竟,我也尝试过,这真的不难,你需要的只是一些耐心和时间而已。
望以上内容,对大家有所帮助!
这是2020年前的最后一回答了,大家做好防护,过个健康年,提前预祝大家新年快乐。
回复 支持 反对

使用道具 举报

 
9#
☆F_cuz☆com 发表于 2020-6-2 21:06:55 | 只看该作者
 
楼主楼主,我刚刚重新设计了自己的网站Ming YIN,实在忍不住想要show off一下。
秉承着不让大家裤子都脱了,就给看这个,我一定先上图,再说话:
【主页君】
GIF: home_v1.gif - Jumpshare
VIDEO: home_v1.mp4 - Jumpshare
 第107张图片
【认真写的图片zoom out,呼噜呼噜】
GIF: home_v3.gif - Jumpshare
VIDEO: home_v3.mp4 - Jumpshare
 第108张图片
【华丽丽地手机主页君】
GIF: home_v2.gif - Jumpshare
VIDEO: home_v2.mp4 - Jumpshare
 第109张图片

知乎酱好傲娇,gif直接转jpg了,所以要想看口爱的gif君,请移步链接

===好想睡觉,可是又睡不着的分割线===

言归正传,为什么要有个人网站?

1. 简单明了的个人展示
此类网站我的第一反应就是简单、明了。举个栗子的话就会想到:about.me | your personal homepage,用最少的时间和最短地篇幅再一个网页上展示自己。如果有需要的话,同时告诉别人如何联系到自己。
这样的网站一般都会具有如下属性:
    开发成本为0 - 30分钟 附加链接到自己的其他社交、通信平台
    明快简介的设计让一张图就抓住别人的眼球
好的Examples:
    About me上自己走一下 About Zach Holman

  • About –          Scott ChaconNancy Garcia

2. 定期有内容产出的发布平台
嗯啊,这就是传说中的曾经的博客们啦。但是,随着越来越多的垂直社区变多,网页可以承载更多的内容(声音、网页设计、视频等等),微博、微信等轻量级碎片型内容输出平台增多,写作平台的出现。这样的类型的个人网站,更多的是在某专业内,定期输出内容供自己的subscribers们享用。
这样的网站一般都会具有如下属性:
    基于某一个范博客平台:Wordpress,Blogger,Tumblr,新浪博客等 基于某一个垂直社区的类发布平台:知乎专栏,简书,Segment Fault博客,LOFTER,V2EX记事本,Medium,Svbtle等 如果想要这样的个人主页有价值,就要固定地产出有内容的信息 突出个人在于某一个行业、行为、类别知识上的优越性
好的Examples:
    Julie Zhuo
    阮一峰的网络日志
    KayST的LOFTER
    乱弹琴 - 知乎专栏

3. 单纯的自我总结归纳,自我欣赏
好吧,终于到了这个了呢(我的网站就属于这个范畴)。到了这个阶段,如果自己不会写Code,恐怕就不行了。大家有的是完全自己捯饬,有的人则是基于一个Blog系统再自我改造。从样式、功能、逼格都是完全要自我掌控,而且一定会配搭一个叼炸天气的域名,像是什么http://fuck.me,http://anal.io,http://12306.com之类的就都出来了。
这样的网站一般会有如下属性:
    个人网站突出地显示了做网站的人的程序、设计、美学水平(请不要主观联系到12306好么) 完全是自己闹着玩,其实没什么愿意看,做的人一般不是闲的蛋疼就是不自己做一个就蛋疼 但是做得很好的话,就会感觉特别吊,建议有此意向的人研习下列课程: HTML&CSS 101,Typography 101,Web Application Development with PHP 101,How RSS Works 101,Graphic Design 101,Why White Space is More Important Than Your F**king Stupid Color Selections 201等 网站制作方式一般有:彻头彻尾自己写,基于Jekyll • Simple, blog-aware, static sites,或者更完善一点的Octopress,大家也可以去看一下Logdown, blog things with Markdown 网站的内容也是根据个人喜好的,是自己写一点四十五度仰望星空明媚的忧伤;还是谈古论今高谈时事政治;或者是不停地post一些从Hacker News上Copy下来的最新libraries;实在不行就是自己不停地改网站样式却什么内容都不输出。
好的Examples:
    Hakim El Hattab
    Yeedor™
    Trent Walton
    EverMemo|AnimeTaste|小熊词典
    Huang Yang
    Yuguo Blog
    Ruoyu Sun


还有好多好的独家珍藏。好啦,要回宿舍了,Study Center只有我一个人孤孤单单的,好伤心。有没有好基友来找我过夜呀?
回复 支持 反对

使用道具 举报

 
10#
烤星星 发表于 2020-6-2 21:07:27 | 只看该作者
 
@糯糕团子

他的回答基本正确,只是补充一些。

1.ubuntu16.04以上不支持php5。
2.如果实例远程连接能连接上,公网IP不能登陆,请查看安全组规则是否正确设置。
3.公网能ping通后,可以国外买个域名,域名解析服务,不用备案就可登陆个人网站。
回复 支持 反对

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
活跃网友
返回顶部快速回复上一主题下一主题返回列表APP下载手机访问
Copyright © 2016-2028 CTLIVES.COM All Rights Reserved.  西兔生活网  小黑屋| GMT+8, 2024-6-30 16:56