I want to make a super basic website using only HTML and CSS. The reason is because I have no real need to do any animations, communicate with a backend, etc for this site. Also, there will be no areas I need to collect user input.
It seems to be rare to just write up static pages from scratch like this and I realized that doing this is a bit different from traditional coding that I am used to.
For example, if I write an article like this one on the site, since my Visual Studio Code does not have word wrap on, the content is kind hard to manage when writing... A paragraph will go way off of the page unless I keep going down every 79 chars and etc... I'm not really used to hardcoding this much text into a "code file."
Does anyone have a preferred setup or tips for working with just HTML and CSS and hardcoding the content into the static page itself?
I suppose I could just turn wordwrap on my editor for this, but was wondering if there was a better way.
I recommend using a tool, which generates static HTML pages from HTML templates and text files. It's way more data-driven and dynamic than going old-school and hard-coding the data. Remember? Hard-coding is bad!
When I say tool, it can be anything, for example you could use a CMS like Jekyll, which is very integrated with GitHub - and host for free on GitHub with very good performance, CDN, etc. and git versioning 😁 Alternatively, you could write your own program, but keep it simple! Just some merge-tool which takes the templates and some markdown or JSON input and outputs the static HTML. I did that in PHP for one customer, who wants to host on their own webspace, and sometimes do it for static pages in a build-step, when I don't want to update the site with dynamic content from time to time.
That way, you can update the data files as you go, or implement a cron job which pulls data from an external source - imagine this: pull your DevBlog articles via the GraphQL API and store them into a JSON file. Then trigger a simple merge of the template with the new data inside your CMS.
I know this may seem like a sarcastic response, but it isn't...
Why not just write the HTML and CSS?
I will occasionally work on a static site for a friend or colleague, and I can't understand why - for some folks - instead of "spreading the butter onto the bread" it becomes a huge project of figuring out how to "evenly distribute all butter dependencies within the scope of a bread slice, which will often have optional properties associated with them."
I code an HTML template with
<!-- CONTENT GOES HERE-->within the body. I link to a CSS file. Now, every time I create a new page, I use the_template.htmlfor the base (adding any necessary styles to the CSS file.)Done.
If you're looking for vanilla HTML/CSS that is a tad more capable of things, such as includes or partials, then - as a developer - Gulp is a nice way to automate various things, including the ability to use Sass, concatenate header/body/footer content, etc. This is also where Codekit or Prepros can come in handy, too - since I would say that this is going a bit beyond KISSing the project ("Keep It Short and Simple").
However, unless it's something personal - or I feel it will speed up the process - I simply "spread the butter onto the bread."