web.myco.systems/web-myco/public/index.json

[{"content":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.\nIf you need further advice, post your questions on GitHub Discussions.\nHugo project structure # Before leaping into it, first a quick note about Hugo project structure and best practices for managing your content and theme customisations.\nIn summary: Never directly edit the theme files. Only make customisations in your Hugo project\u0026rsquo;s sub-directories, not in the themes directory itself. Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.\nIn order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your themes/ directory, you should always leave these files intact.\nThe correct way to adjust any theme behaviour is by overriding files using Hugo\u0026rsquo;s powerful file lookup order. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.\nFor example, if you wanted to override the main article template in Blowfish, you can simply create your own layouts/_default/single.html file and place it in the root of your project. This file will then override the single.html from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.\nAs long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.\nChange image optimization settings # Hugo has various builtin methods to resize, crop and optimize images.\nAs an example - in layouts/partials/article-link/card.html, you have the following code:\nThe default behavior of Hugo here is to resize the image to 600px keeping the ratio.\nIt is worth noting here that default image configurations such as anchor point can also be set in your site configuration as well as in the template itself.\nSee the Hugo docs on image processing for more info.\nColour schemes # In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a \u0026lt;scheme-name\u0026gt;.css file in the assets/css/schemes/ folder. Once the file is created, simply refer to it by name in the theme configuration.\nNote: generating these files manually can be hard, I\u0026rsquo;ve built a nodejs terminal tool to help with that, Fugu. In a nutshell, you pass the main three hex values of your color pallette and the program will output a css file that can be imported directly into Blowfish. Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as neutral, primary and secondary variants, each containing ten shades of colour.\nDue to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to conform to a particular format by providing the red, green and blue colour values.\n:root { --color-primary-500: 139, 92, 246; } This example defines a CSS variable for the primary-500 colour with a red value of 139, green value of 92 and blue value of 246.\nUse one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official Tailwind colour palette reference.\nOverriding the stylesheet # Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a custom.css file in your project\u0026rsquo;s assets/css/ folder.\nThe custom.css file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.\nUsing additional fonts # Blowfish allows you to easily change the font for your site. After creating a custom.css file in your project\u0026rsquo;s assets/css/ folder, place you font file inside a fonts folder withing the static root folder.\n. ├── assets │ └── css │ └── custom.css ... └─── static └── fonts └─── font.ttf This makes the font available to the website. Now, the font can just import it in your custom.css and replaced wherever you see fit. The example below shows what replacing the font for the entire html would look like.\n@font-face { font-family: font; src: url(\u0026#39;/fonts/font.ttf\u0026#39;); } html { font-family: font; } Adjusting the font size # Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to 12pt, but it can be changed to whatever value you prefer.\nCreate a custom.css file using the instructions above and add the following CSS declaration:\n/* Increase the default font size */ html { font-size: 13pt; } Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than 12pt. Similarly, to decrease the font sizes, make the value less than 12pt.\nBuilding the theme CSS from source # If you\u0026rsquo;d like to make a major change, you can take advantage of Tailwind CSS\u0026rsquo;s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.\nNote: Building the theme manually is intended for advanced users. Let\u0026rsquo;s step through how building the Tailwind CSS works.\nTailwind configuration # In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the tailwind.config.js file which is included in the root of the theme directory:\n// themes/blowfish/tailwind.config.js module.exports = { content: [ \u0026#34;./layouts/**/*.html\u0026#34;, \u0026#34;./content/**/*.{html,md}\u0026#34;, \u0026#34;./themes/blowfish/layouts/**/*.html\u0026#34;, \u0026#34;./themes/blowfish/content/**/*.{html,md}\u0026#34;, ], // and more... }; Project structure # In order to take advantage of the default configuration, your project should look something like this\u0026hellip;\n. ├── assets │ └── css │ └── compiled │ └── main.css # this is the file we will generate ├── config # site config │ └── _default ├── content # site content │ ├── _index.md │ ├── projects │ │ └── _index.md │ └── blog │ └── _index.md ├── layouts # custom layouts for your site │ ├── partials │ │ └── extend-article-link/simple.html │ ├── projects │ │ └── list.html │ └── shortcodes │ └── disclaimer.html └── themes └── blowfish # git submodule or manual theme install This example structure adds a new projects content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that\u0026rsquo;s required is to recompile the main.css file.\nInstall dependencies # In order for this to work you\u0026rsquo;ll need to change into the themes/blowfish/ directory and install the project dependencies. You\u0026rsquo;ll need npm on your local machine for this step.\ncd themes/blowfish npm install Run the Tailwind compiler # With the dependencies installed all that\u0026rsquo;s left is to use Tailwind CLI to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:\ncd ../.. ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit It\u0026rsquo;s a bit of an ugly command due to the paths involved but essentially you\u0026rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme\u0026rsquo;s main.css file and then where you want the compiled CSS file to be placed (it\u0026rsquo;s going into the assets/css/compiled/ folder of your Hugo project).\nThe config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.\nEach time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add -w to the end of the command to run the JIT compiler in watch mode.\nMake a build script # To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a package.json to the root of your project which contains the necessary scripts\u0026hellip;\n// package.json { \u0026#34;name\u0026#34;: \u0026#34;my-website\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;server\u0026#34;: \u0026#34;hugo server -b http://localhost -p 8000\u0026#34;, \u0026#34;dev\u0026#34;: \u0026#34;NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit\u0026#34; }, // and more... } Now when you want to work on designing your site, you can invoke npm run dev and the compiler will run in watch mode. When you\u0026rsquo;re ready to deploy, run npm run build and you\u0026rsquo;ll get a clean Tailwind CSS build.\n🙋‍♀️ If you need help, feel free to ask a question on GitHub Discussions.\n","date":"8 August 2020","permalink":"/services/web-hosting/","section":"Services","summary":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.","title":"Advanced Customisation"},{"content":" Simple, yet powerful. Learn how to use complex open-source tools. Never worry about renewing a license, open-source projects can be incredibly useful for small and medium sized companies/orginizations. Don\u0026rsquo;t just settle for \u0026ldquo;good enough\u0026rdquo; we help you get a secure and powerful suite of software running on your own server or managed through our secure cloud.\n","date":"8 August 2020","permalink":"/services/","section":"Services","summary":"Simple, yet powerful. Learn how to use complex open-source tools. Never worry about renewing a license, open-source projects can be incredibly useful for small and medium sized companies/orginizations. Don\u0026rsquo;t just settle for \u0026ldquo;good enough\u0026rdquo; we help you get a secure and powerful suite of software running on your own server or managed through our secure cloud.","title":"Services"},{"content":"Building a more open and equitable internet, starting with your organization.\nNo more bloated websites, licensing fees, or shady proprietary software, we want to help you and your organization switch to a no-bullshit model of internet infrastructure.\nTake a look around, and learn about our 100% open-source solutions for websites and IT systems.\n","date":"8 August 2020","permalink":"/","section":"Welcome to Blowfish! 🎉","summary":"Building a more open and equitable internet, starting with your organization.\nNo more bloated websites, licensing fees, or shady proprietary software, we want to help you and your organization switch to a no-bullshit model of internet infrastructure.","title":"Welcome to Blowfish! 🎉"},{"content":"","date":"1 January 0001","permalink":"/authors/","section":"Authors","summary":"","title":"Authors"},{"content":"","date":"1 January 0001","permalink":"/categories/","section":"Categories","summary":"","title":"Categories"},{"content":"","date":"1 January 0001","permalink":"/series/","section":"Series","summary":"","title":"Series"},{"content":"","date":"1 January 0001","permalink":"/tags/","section":"Tags","summary":"","title":"Tags"}]