{"id":144,"date":"2022-10-07T20:25:00","date_gmt":"2022-10-07T20:25:00","guid":{"rendered":"https:\/\/www.grizzly-hills.com\/?p=144"},"modified":"2022-10-23T14:19:58","modified_gmt":"2022-10-23T14:19:58","slug":"starter-website","status":"publish","type":"post","link":"https:\/\/www.grizzly-hills.com\/index.php\/2022\/10\/07\/starter-website\/","title":{"rendered":"Starter Website"},"content":{"rendered":"\n<p>I often find myself setting up a website project, and all the configuration that goes with it. This set up task can be fairly repetitive, so I took some of the basic features I almost always start with, and made this project.<\/p>\n\n\n\n<p>The project does have a couple &#8220;extra&#8221; features beyond an absolute basic website. Sometimes I want to just build a set of files I can host somewhere, other times I want to just deploy a Docker image to a cloud service.<\/p>\n\n\n\n<p>For a build system, I&#8217;m using npm from NodeJS. For site packaging, I&#8217;m using webpack, which also provides a development server with live reload.<\/p>\n\n\n\n<p>The repository is here: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/d4lton\/jools\" data-type=\"URL\" data-id=\"https:\/\/github.com\/d4lton\/jools\" target=\"_blank\">https:\/\/github.com\/d4lton\/jools<\/a>. The name is a play on Jewels, which is a simple game I&#8217;ve been working on.<\/p>\n\n\n\n<p>It doesn&#8217;t include a UI framework or CSS preprocessor, because those tend to go hand-in-hand, and I didn&#8217;t want to predetermine which framework I might want to use (if any).<\/p>\n\n\n\n<p>It also isn&#8217;t set up for Typescript, even though I tend to use Typescript these days. I may create a Typescript version of this project, but converting to Typescript is fairly simple. I chose to keep this starter project as basic as I could.<\/p>\n\n\n\n<p>The README.md should have enough instruction to get going. Follow the instructions under INSTALLING and RUNNING.<\/p>\n\n\n\n<p>The structure of the project is hopefully easy to understand:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code style=\"background-color: rgb(255, 255, 255);\"><strong>src<\/strong><\/code><span style=\"font-size: 1rem;\">: This directory (and any sub-directories you create) are where your JavaScript code should be. The <\/span><code style=\"background-color: rgb(255, 255, 255);\"><strong>src\/index.js<\/strong><\/code><span style=\"font-size: 1rem;\"> file is the &#8220;main&#8221; JavaScript file and will automatically be included in <\/span><code style=\"background-color: rgb(255, 255, 255);\"><strong>static\/index.html<\/strong><\/code><span style=\"font-size: 1rem;\">.<\/span><\/li><li><code><strong>static<\/strong><\/code>: This directory (and any sub-directories) are where your HTML and CSS files should be. The <code><strong>static\/index.html<\/strong><\/code> is the &#8220;main&#8221; HTML file and will automatically include your JavaScript code.<\/li><li><code><strong>config<\/strong><\/code>: This directory contains the configuration JSON file(s). Right now there is just the <code><strong>config.development.json<\/strong><\/code> file for local development. Also, it is basically empty. However, any properties you set in here will be &#8220;injected&#8221; into the static website and be available in the <code><strong>process.env<\/strong><\/code> object. For the curious, this is intended to mirror how environment variables are made available in a server-side NodeJS project.<\/li><\/ul>\n\n\n\n<p>The project doesn&#8217;t really do anything, as it is intended to be a starting place for a website. The included HTML, CSS, and JavaScript are all basically placeholders.<\/p>\n\n\n\n<p>Hopefully this project helps you in some way! Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I often find myself setting up a website project, and all the configuration that goes with it. This set up task can be fairly repetitive, so I took some of the basic features I almost always start with, and made this project. The project does have a couple &#8220;extra&#8221; features beyond an absolute basic website. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.grizzly-hills.com\/index.php\/2022\/10\/07\/starter-website\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Starter Website&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[25,30,24,12,29,26],"class_list":["post-144","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","tag-docker","tag-html","tag-javascript","tag-nodejs","tag-npm"],"_links":{"self":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":6,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/144\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}