loading...
Turner Software

Building a flat website with ASP.NET Core

turnerj profile image James Turner ・4 min read

As of last night, I launched the website for BrandVantage, my product I am building. I'm pretty proud of the site, I designed and built it myself as well as designed the logo. This all happened in just over one week since I left my job too!

I touched on a little what BrandVantage was about in a comment but this, and various other posts coming soon, are to talk about development and technologies, not me trying to sell you on it. When I do launch on Product Hunt, I will probably post about that though! 🙂

This new site, as well as my personal site and my company's website (both also launched not too long ago) are all built very similarly: a single-page, flat HTML with minified CSS.

I like having a flat site like this as it is hosting agnostic. These sites I have built, while are ASP.NET Core projects in code, they are deployed to PHP hosting. The rest of this post explains that setup a little.

The Base Project

I'm using Visual Studio with each of these projects starting out the same, an empty ASP.NET Core website project.

Visual Studio Solution Structure

For getting the actual project working in development, you will need to update your Startup.cs to be something similar to below:

public class Startup
{
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }

        app.UseDefaultFiles(new DefaultFilesOptions
        {
            DefaultFileNames = new List<string> { "index.html" }
        });

        app.UseStaticFiles();
    }
}

You want to make sure you have UseStaticFiles and set your index file to be a default otherwise it won't work as you expect.

Site Root

Site Root
This setup really is taking it back to basics, I'm not using any special features of ASP.NET Core itself, there isn't some Razor template I am exporting to flat HTML. It really is just one index.html file that I've manually built.

I did look into trying to export a site from CSHTML into plain HTML but it seemed a little too complicated for a single page site. I might revisit this in the future but for now, a flat HTML page is perfect for me.

Bundling and Minification

My setup relies on the Nuget package BuildBundlerMinifier which allow the minification of CSS by just simply building the codebase as you would any other .NET codebase.

It uses a JSON file which for me looks like:

[
  {
    "outputFileName": "wwwroot/bundles/site.min.css",
    "inputFiles": [
      "wwwroot/css/normalize.css",
      "wwwroot/css/layout.css",
      "wwwroot/css/product-hunt.css",
      "wwwroot/css/responsive.css",
      "wwwroot/css/compatibility.css"
    ],
    "sourceMap": true
  },
  {
    "outputFileName": "wwwroot/fonts/font-awesome/bundles/fontawesome.min.css",
    "inputFiles": [
      "wwwroot/fonts/font-awesome/css/fontawesome.min.css",
      "wwwroot/fonts/font-awesome/css/light.min.css"
    ]
  }
]

The bundler/minifier does support JavaScript but I don't have any JS in my site besides Google Analytics and a Product Hunt script.

You can see in my site root screenshot that there is a bundles folder, that is created by this process however I have that excluded from Git.

Because my site is flat HTML, I do need to reference the bundled files directly which I do as shown here:

    <link href="/bundles/site.min.css" rel="stylesheet" />
</head>
<body>
    <link href="fonts/font-awesome/bundles/fontawesome.min.css" rel="stylesheet" />

The reason for one being in the head and one being in the body is slightly increasing the perception of a faster page load.

One downside to this entire flat HTML method is that these bundled files aren't regenerated on the fly. This means I need to build again every time I want to view a CSS change. For major works, I might manually revert back to non-minified CSS just to make development easier. Ideally though, you would have it auto-generate on modification - this is something that many other tools provide but I don't (yet) have in my setup.

If I were to use CSHTML, I could actually reference both and use tag helpers to define what environment I am running in. Again, something I might consider for the future.

Continuous Delivery

You might have noticed in that first screenshot there is a cheeky build-pipeline.yml file, this is used by Azure DevOps Pipelines to allow me to automate my build and deployment setup.

My file looks like this:

resources:
- repo: self
queue:
  name: Hosted VS2017

steps:
- task: DotNetCoreInstaller@0
  inputs:
    version: '2.2.101'

- task: DotNetCoreCLI@2
  displayName: 'dotnet build'

- task: ArchiveFiles@2
  displayName: 'Archive src/Website/wwwroot'
  inputs:
    rootFolderOrFile: src/Website/wwwroot
    includeRootFolder: false
    archiveType: 7z
    archiveFile: '$(Build.ArtifactStagingDirectory)/website.7z'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: Web'
  inputs:
    ArtifactName: Web

I'm no expert on Azure DevOps Pipelines but the above is what I have working for me. First it installs a specific version of .NET Core, just so I have a stable and consistent environment (as .NET Core is already installed). I then run a build which really is just running the minification process. The next two tasks are required for getting the data to package up the build for the deployment pipeline.

At the time of making this setup, Azure didn't support a full YML config for the deployment side of the pipeline so I can't show that to you. The short version of what it does is:

  • Waits for a new build package coming from the master branch (allowing me to use other branches for dev without fear of deploying them)
  • Unpacks the artifact
  • Using FTPS, deploys all the changes to my hosting

Conclusion

Maybe not the greatest or most productive setup but one that works pretty well for me. What I can strongly say though is how much I love automated deployments - that stuff is amazing!

Posted on by:

turnerj profile

James Turner

@turnerj

Director - Innovator of Things - Co-Author of Your First Year In Code

Turner Software

A small software development company in Adelaide, Australia.

Discussion

markdown guide
 

I must say you have pretty nice looking landing pages there, congrats on that!, putting that aside it looks very interesting the way you create your projects, you intrigue me to investigate more about the ASP.NET Core and trust me if i had time i would start learning that but as it right know i have a couple of important projects in development with REACT Js that i need to finish.

 

It is a bit like that isn't it - finding time to do all the different things we want to do. Glad you found this interesting 🙂

 

Nice read and interesting setup. Going to check this out for myself. I'm more into product development and simple pages I click together with services like carrd.co but I like this. For fast performing websites that need fast loading this is very nice 🙌🏻👌🏻

 

Really well designed page. When I'm dealing with static sites I put them in S3 buckets, or on github pages.

 

Thanks! I'm really happy with how it turned out 🙂

Github was the first direction I was going to go for my personal sites but I changed my mind when I was looking at solutions for my business. My product code use to be hosted on Bitbucket but was to be deployed to Azure. Azure DevOps seemed like the best solution in terms of integration between my code and Azure.

Rather than maintain two separate processes for managing my personal site, my company site and my product's site, I decided to just roll it all the exact same way.