i know this is a very basic question but i am new and this is the place for newbies.
I want to create a website without any CMS (no wordpress, joobla, squarespace) and i was wondering how to go about doing it.
do you guys keep the html/css/js coding in well-organized folders on your desktop or put in on a server…i dont even know what the right questions are to ask so please direct me in the right direction.
the right answer to this will prob help a lot of people on here.
As a first thing to do, I suggest you to get used to some kind of version control system. GIT is the most famous and it really helps to learn it as a first thing. It can save you in a lot of situations.
Than I advise you to develop your application on your computer in a well organized way. The more it is organized the better it is.
You should use IDEs instead of notepad. Most of them have live server functionalities, which means your computer will act as a web server when you are coding. This will also provide a hot reloading functionality: when you save your changes you’ll see them live on the browser.
I strongly suggest the use of Visual Studio Code with the live-server plugin.
Keep your changes saved with git.
While you are at it, you could even make a GitHub or GitLab account and push your code there. When you move to another computer you’ll only have to pull your code from there and you are good to go.
Both in GitHub and in GitLab you can create private repositories, so your code won’t be visible to other people unless you want so.
When you are happy with your result, put your code on the server
thank you for your response. I have used Brackets as an IDE before and it seems to work well.
my question is how to make a live website …with the files being on my computer will the site be live even if my computer is not on wifi?
Also is there any security weakness of the files being on a personal computer rather than a server?
You can’t use your computer unless it is publicly reachable from outside the network.
Which means you’ll need a public static IP (they can be quite expensive) or a public dynamic IP (but you’ll need the DNS to keep changing the address it points to, to match the current one). You’ll also need some rules that redirect the request in your network directly to that specific computer. It can be a pain in the @$$ and it might not be worth it.
What you can do instead is:
Buy a domain and buy a place on a hosting platform. They are usually sold together.
I don’t know where you live. Depending on that, some companies might be better than others.
I live in Italy and I use Aruba for both the domain and the hosting, it costs me something like 10€ per year.
When you get your space, they’ll give you your credentials to access the service and you’ll be able to put your files on there with FTP.
Most hosting providers also give you some database you can use and the backend language that they mostly support is PHP.
Another option is GitHub pages but it works only for static websites. So you won’t be able to have a backend that dynamically generated the pages for you there.
If you use this and you use tools like npm or yarn to manage the JavaScript dependencies, there is a library for gh-pages that allows you to push your code on GitHub pages with a simple and fast command
Edit: there are also good free hosting providers, but they usually enforce some kind of advertisement.
This could be their names in the domain, like www.yourwebsitename.hostedxxx.com or some banner that advertise their company.
While it’s good at the beginning to get used to how the system works, I don’t encourage it for professional websites.
Also for security reasons, get a SSL certificate for your website. Most hosting providers provide it for free.
They give you a control panel and you’ll be able to activate it from there.
Having the SSL certificate is VERY important. It encrypts that data that your site and its users share and protects the users from attack like the “man in the middle” (basically someone between the user and your website that reads the data that is passed).
You make your website live by uploading it to Codepen, Netlify, Github Pages, or another free hosting platform. Everyone will be able to see it on one of those websites. If the files stay on your computer only you will see it. Everyone would have to look at your laptop screen to see your website.
Thanks for all the info!
Yeah i dont want to use github because i want my site to be a professional site one day. right now i would like to create one just for the sake of learning to code and i am the type of learner who learns the best by having a project to work on. freelance projects are harder to get on than creating your own and your working for someone else. y not create a website myself that i can monetize one day with some e-commerce is my thinking.
I live in the US so i guess godaddy would be a good option.
so the hosting part of the package is where i can use there servers like my own server and load up my code files on there to keep my site live? (FTP?)
do you ever organize your folder by different pages/tabs in your website header? like “home” “about me” “contact us”? and then under each one you do what you posted?:
├── index.html
├── images/
├── fonts/
├── css/
│ └── style.css
└── js/
└── script.js
I see that a lot of people like digital ocean but apprently theres a learning code because you have to set up your own cpanel…
and godaddy doesnt do node.js…
so im guessing ill have to set through some training and figure out how to use digital ocean?..if someone can tag a digital ocean user on here so they can explain if a newbie should take this on…id much appreesh!
If you are looking for Node.js, I think you can do something with Heroku, although I’m not sure what you can do about the domain name.
They also have a way to push the code to it through git and the command line. They have a tutorial on their website that walks you through the process.
I found it very helpful, but there are limits on the free tiers of Heroku.
It’s better if you read them before.
If it’s for a single application, I think you can keep online 24/7 without going over those limits.
If it’s more than one app, it can exceed them.
FTP is a protocol for transferring files. You need to use some software like FileZilla. Basically with it you’ll connect to the server and you’ll see the folders and files there, as well as the one on your local machine.
Moving files from the local to the remote will be as easy as moving them from one folder to another
You can also have a look static site generators like Jekyll for Ruby or Gatsby using React if you have a github repo you can cname to your url via github also you would have complete control of the design layout unlike other cms’s also check usds.gov which is built using Jekyll.If you have static site you can CNAME via github to your url or host on github @yourusername.github.io - hope this helps https://pages.github.com/
All you need to create a basic website like this is an HTML page and a web server to serve it on.
Maybe a couple lines of CSS declarations to make it look pretty.
That’s it.
It’s really easy to get lost in the weeds and over-engineer a website. You don’t need to pump your website with the latest JavaScript framework, React, Jquery, Node.js, or whatever the bloat-du-jour is people want to foist on you. It’s just a website– we’re not building the next Facebook here.
All you need is HTML to give the page structure, and CSS to make it pretty.
Seriously. That’s it.
I like nginx as a server.
Digital Ocean is great. I’ve been using them for years.
Their documentation is the best around for setting up an nginx server.
It might look complicated, but it’s really just following a bunch of steps, like a recipe.
After you have it set up, all you do is plop your index.html file into /var/www/html,
and it gets served to the web.
Voilà, you have a website on the internet.
It will be accessible through an IP address in your browser. Your digital ocean panel (or whoever you decide to buy a virtual server from) will display your IP address on your account dashboard panel.
For example, let’s say the IP address of your server is 206.81.5.191.
If you were to enter that IP address into your browser, you would see your HTML page being served.
Now, obviously you don’t want to tell everyone, when they want to go to your website, to go to 206.81.5.191. So you will need to buy a domain name. Namecheap is great for this. They will allow you to purchase a domain name, and provide you with DNS services that will redirect any requests to your website name (let’s say gattacaspotlight.com) to your server 206.81.5.191.
It might sound complex, but once you do it once, you don’t need to worry about it again.
Google is your friend.
Hope you find some value in this. Getting my head around setting up the server was the hardest part for me in the beginning.
Be well!
hey RAD! thanks so much for your response…ive been on the fence about the creating my own cpanel thing on digital ocean but now that you say its just like following a recipe…i think ill go forward with digital ocean…a lot of you guys on FCC seem to like it so, if i have any questions it seems like a great support community…
@gattacaspotlight with extra pages and stuff it would look something like this.
I say to start out just get a Netlify account and buy a domain name to add to your website. I cannot get easier than that.
