# Creating a Website ALSO SEE: [[Website Development]] [Facebook Link](https://www.facebook.com/creativenail.spa.9/) Dynamic website, not Static (to allow for user interaction) - Static uses [[HTML]] - Dynamic uses [[HTML]], advanced programming, and databases ## Frequent Connections [[Web Hosting]] [[Cloudflare]] | [[Hostinger]] | [[WordPress]] [[SQL]] | [[Microsoft SQL Server]] | [[SQL Server Management Studio]] [[Personal Program]] ## Process ### Using [[GitHub]] and [[Cloudflare]] >[!todo]+ Remaining Goals >- not need to tag each and every page >- look into [[Jekyll]] and [[Eleventy]] >[!help]+ Research >- what is a package.json file (Eleventy created a default one) put together files in [[GitHub]], like done when using [[Digital Garden Plug-in]]. I started a new repository to try creating one from scratch but the [[Digital Garden Plug-in|Digital Garden]] is functional. ##### Create a new repository called `Scratch-Website` added a README.md file [[possible helpful website repositories]] (research: [eleventy](https://www.11ty.dev/docs/languages/nunjucks/)) ##### Put together files [[general file breakdown]] [[specific file breakdown]] ##### Make active thru [[GitHub]] --- ### Using [[Digital Garden Plug-in]] ![[Digital Garden Plug-in#^8ea354]] #### Change `custom-style.scss` file file located at `digital-garden/src/site/styles` [[code for custom-style]] Outline: ```scss body.theme-dark body.theme-light body .timestamps .notelink h1 h2 h3 h4 h5 h6 table .graph .toc .sidebar-container nav.filetree-sidebar /*area on left*/ .search-button & > .folder .notelink .notelink.active-note .fa-sticky-note nav.toc /*area on right*/ .cm-s-obsidian #search-results .searchresults /* changes body of resulting files */ #floating-control .fnote .footnote-ref .fnote-marker .shownote #forest-graph .toc-container nav.navbar .navbar-inner .search-button .cards .cards-cover-no-border .cards-title-hide-icons .callout .callout-title //repeats of body.title-note-icon body.filetree-note-icon body.links-note-icon body.backlinks-note-icon //end repeats of .align-icon /* via digital-garden-base.scss row 743 */ .pill .aliases .header-tags .fullpage-overlay /* via digital-garden-base.scss row 421 */ .sidebar .toc-container .backlinks ``` Details: ```scss ``` #### Evaluate `digital-garden-base.scss` file located at `digital-garden/src/site/styles` Outline: ```scss body .content .external-link .markdown-preview-view div.transculsion .markdown-embed-link ul.task-list .sidebar .graph .graph-fs .expand-line .sidebar-container .toc .toc-container .toc-title-container .backlinks .backlink-list .backlink-card .no-backlinks-message .graph #link-graph @media #link-graph .sidebar .sidebar-container .graph .toc @media .sidebar-container .filetree-sidebar .empty-navbar @media .search-button .navbar .navbar-inner .search-button .search-text .notelink .foldername-wrapper .inner-folder .filename .notelink.active-note .fullpage-overlay /* row 421 */ .search-container /* row 431 */ .search-container.active .search-box .search-box input .search-box input:focus #search-results #search-results .searchresult .search-box-footer /* row 495 */ .navigation-hint .search-link .search-button .search-keys // stuff about these things .callout-title-inner, .callout-title-inner p, .callout-icon, .callout-fold, .callout-content // end of these things .referred // Graph Controls .graph-title-container /* row 591 */ #full-graph #graph-full-btn #full-graph.show #graph-controls input[type="range"]::-webkit-slider-thumb //repeeats of body.title-note-icon .cm-s-obsidian body.filetree-note-icon .filename body.links-note-icon .internal-link body.backlinks-note-icon .backlink //end repeats of .timestamps /* row 727 */ .align-icon /* row 743 */ .cm-s-obsidian ``` #### Evaluate `obsidian-base.scss` Outline: ```scss body .theme-light .theme-dark /* row 543 */ iframe /* row 601 */ @media print .theme-dark body /* font information */ @media print * html, /* row 675 */ //different versions of these "body"s body body body.is-translucent body body.is-grabbing //end of different versions .app-container .app-container.no-transition .horizontal-main-container :focus // START OF ORIGINAL FILE // /* row 734 */ .CodeMirror /*...*/ .cm-fat-cursor /*...*/ /* row 787 */ @keyframes /*...*/ /* row 811 */ .CodeMirror /*...*/ /* row 831 */ .cm- /*...*/ /* row 1073 */ //START OF CUSTOM DEFINED STYLES FOR OBSIDIAN // /* row 1096 */ .markdown .CodeMirror .drag-ghost .empty-state @media // OS-dependent rules to make space for traffic lights buttons, window buttons and sidebar toggles. // /* 1508 */ ``` --- ### Option via a tutorial ##### Purchase Domain Name & Determine a [[Web Hosting|Web Host]] > [!INFO]- Why? > Without a hosting plan, you need to transform your computer into a website server, which requires deep technical understanding and hefty maintenance costs. Without domains, people have to use an IP address to visit your website, which is harder to remember and simply unpractical. [^hostinger] [^hostinger]: https://www.hostinger.com/web-hosting#layout Purchased the domain `threebluedaisies.com` on [[Cloudflare]] Running with the cheapest version of [[Hostinger]] (might upgrade to 2nd level, doesn't show 1st level on page specific to [[WordPress]]) ##### Install [[WordPress]] ![[WordPress#^ae7230]] --- ### Super Simple [Tutorial](https://medium.com/swlh/making-use-of-apis-in-your-front-end-c168e343bea3) [[Simple Website Code]] --- ## Resources Example websites: - https://github.com/aleen42/PersonalWiki?tab=MIT-1-ov-file - https://wiki.aleen42.com/ - https://github.com/collections/front-end-javascript-frameworks following [Tutorial for creating a dynamic website](https://www.greengeeks.com/tutorials/make-dynamic-website/) - current step: - Install [[WordPress]] - Install SQL first - finish tutorial ![[SQL#^49b784]] [[Resource Index|All Resources]] ```dataview LIST FROM [[]] WHERE !contains(fileClass, "Primary") and contains(file.folder,"Resources") Sort file.name ```