I am building a personal website using Hugo Static Page Generator, but when I do hugo serve, I am no longer seeing a page, but simply a blank page at localhost:1313.
I deleted everything and did a fresh install. But still, Hugo is serving blank pages.
In the blank page, I see the Favicon of the previous site draft I had, even though I deleted everything from the previous theme. I cleared the browser in Chrome and tried a different browser too, but it's still not working.
Not sure what information I can provide, as there are no error messages. How can I fix this?
The problem is likely to be the theme - it is either missing or broken. Hugo does not come with any default/fallback theme if you fail to provide a working one.
Debugging guide:
Check the themes folder, and follow the quickstart.
Try using another, simpler theme.
It may only be a question of configuring the theme, you may read the hugo theme documentation too.
Please verify your config.toml file points to right theme.
If following Quick start tutorial, you might have forgot to run
echo 'theme = "ananke"' >> config.toml
I ran into the same issue after following the hugo getting-started / quickstart guide but instead of using an existing theme i created a very basic theme:
Install hugo i picked install hugo on windows
Create a New Site hugo new site quickstart
Add a Theme
cloning a theme (for example the ananke-theme ) is easier <-- this is what the quickstart does and what i left out
instead you can create a theme with hugo new theme [your-theme-name] which adds a theme skeleton inside your site-folder for example C:\Hugo\Sites\example.com (see the screenshot)
Add Some Content hugo new posts/my-first-post.md
Start the server hugo server -D --watch --verbose
After you created a theme files and folders should be under Sites/example.com/themes/your-theme-name/. Since most of the generated files are (nearly) empty you have to edit a few of them before the quickstart sample is working.
Based on develop a Theme for Hugo i edited /themes/your-theme-name/layouts/index.html
<!DOCTYPE html>
<html> <body>
{{ range first 10 .Data.Pages }}
<h1>{{ .Title }}</h1>
<div>{{- .Content -}}</div>
{{ end }}
</body> </html>
Basic information about hugo taken from develop a Theme for Hugo
Hugo configuration files (TOML, YAML or JSON) are located in the root of your site
Hugo default: Markdown inside content/,
content files contain metadata (frontmatter) and text (/markdown) --> html to public/,
example frontmatter attributes: date, title, description, categories, tags
templates under themes/ (or layouts/)
three types of templates: single, list, partials
theme templates under /themes/your-theme-name/ and then under /layouts/ for index.html and under /layouts/_default/list.html and /layouts/_default/single.html
HTML files will be written to the public/ directory.
You may want to read the hugo theme documentation.
I had the same problem when I cloned my blog from Github but didn't include themes submodules. Including submodules solved my problem:
git clone --recurse-submodules https://github.com/username/your-blog
It could be potentially an issue with the config.toml in the Hugo project directory.
I recently ran into a similar issue where I was seeing only a blank page while trying to create a custom theme with the Hugo and all you have to do is tell Hugo where to find your initial HTML page to render on the browser.
If you are trying to install a theme OR creating a custom theme, go to config.toml in the base directory and specify the theme name as given below:
theme = "${theme_name}"
If you are using the default/custom theme, the theme name will be same as the folder name under themes folder in the project directory.
Related
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
I'm trying to deploy my first react app and I followed the link below to deploy it on gh-pages. When using Git Bash I didn't get any error message, assuming that it worked. However, when I open the link through settings, it just shows a blank page. What am I doing wrong? Thank you in advance.
Here is the link to my repository: https://zerhar.github.io/todo-app/
Link to how to deploy a react app to Git Hub Pages: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
If I "view-source" https://zerhar.github.io/todo-app/ I see that the JavaScript script tags are not pointing to the correct path.
For example, here is one of the script tags which links out to this dead link:
<script src="/Zerhar/todo-app/static/js/2.15fea075.chunk.js">
It needs to be adjusted, so the link becomes this:
<script src="/todo-app/static/js/2.15fea075.chunk.js">
I'm not quite sure where the script tags are being setup as I didn't see them listed here but that would be the first thing to try to fix.
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX?
Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure?
Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.
According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.
Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.
I have followed instruction from blogdown to get a GitHub static blog using markdown. However, a particular theme is not playing nice with it. The following MWE results in a unthemed blog:
blogdown::new_site()
file.create(".nojekyll")
blogdown::install_theme("lambdafu/hugo-finite")
Then editing the config.toml file to reflect my github.io domain.
Finally,:
blogdown::build_site()
cd public
git init
git remote add origin https://github.com/lf-araujo/lf-araujo.github.io
Unfortunately these steps causes the creation of an unthemed website, see here. I suspect it has to do with the custom theme.
Does anyone suggest a way of debugging this error?
P.S.: blogdown::serve_site() generates a correctly themed preview.
Judging from your HTML output files (e.g. index.html), you misconfigured your baseURL in config.toml. It should be https://lf-araujo.github.io/ instead of http://github.com/lf-araujo.github.io. The baseURL option is documented in Section 2.2 of the blogdown book.
I've just migrated my Drupal 7 live site to a fresh dev site and the default theme is only partially loading. Database, code, and files are fresh copies. Everything (content, links, etc) is good except for the theme.
The theme is listed under Appearance and is correctly set to default. The theme's image loads on the Appearance page, the name and info are loaded from the subtheme's .info file, and the parent theme's css is loading (zurb_foundation).
But the subtheme's custom css, regions, and favicon as defined in the subtheme.info are not loading. It's odd, like half the theme is working and half is not.
Attempted fixes include rebuilding the theme registry, switching themes back and forth, drush cc all, checking directory permissions.
Any clues?
I don't know why it broke, but I know the fix now.
Duplicate the theme folder. Rename the theme's info file. Load this as a new theme. Problem solved.
The contents of the theme directory are exactly the same, but the new name allows it to load correctly.
I know this is an older post, but the same happened to me recently.
The Live-Server used a different PHP Version (5.3.X). Switching to PHP 5.4 solved the problem immediately.