Blogdown theming not being picked up by github - hugo

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.

Related

Hugo command hugo server -D issue

Please someone help me i don't understand the problem here.I'm new to hugo and this error just keeps on appearing when I try to create markdown file.The error I'm getting
Without having a link to the source code of the theme you're using, it's hard to tell. However, I found giraffeacademy/ga-hugo-theme, which looks to be the same as what you're using (the line numbers seem to match).
It looks like the theme is outdated. It uses .URL in the list page template to try and link to the post that it's listing, but that isn't valid on the latest version of Hugo.
Changing {{.URL}} on line 14 in theme/ga-hugo-theme-master/layouts/_default/list.html to {{.Permalink}} should fix the issue.

How to use arbitrary directory as static directory in Reactjs

I have a website written in React.
The website itself works fine.
I also have blog which is based on Wordpress.
When I put blog contents on blog directory, React show the 404 not found page because all contents but static is managed by React.
I think if I could set one more directory called blog as static directory, I can put all Wordpress related files on the directory.
But I was struggling to do that.
Is there any options or setting files for react-scripts build?
like react-scripts build --static-directories static,blog
Could you please help me?
/index.html
/static/* < static contents
/blog/* < also static contents.
Thanks in advance.
[UPDATE] even though i put static file on static directory, I could not access it. It turned out I need to import that static file from Reactjs file...
This is something you probably want to deal with on a server level.
So if you are using express, then you can do something like:
app.use('/static', express.static('public'))
[SOLVED] Problem was 2 folds.
Server-side and client-side.
First, I edited the .htaccess file not to rewrite anything.
RewriteEngine off
Now Safari can understand "my domain/blog/" correctly.
But Chrome still treat "my domain/blog/" in ReactJS.
I don't understand why but I can see correct no-React contents only once after deleting cache. But once I open React contents, Chrome start treating "my domain/blog/" as React contents again.
Then I checked source code again and found that I used a React Router's feature called Switch. It seems Switch is doing rewriting thing in React.
So I removed the Switch tag and finally problem solved.

Why is Hugo serving blank pages?

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.

Integrating youtube-direct-lite with angularjs app

I was unable to find any open source video recorder that can be integrated with an angularjs app. I came across Youtube-direct-lite but I have no idea how to integrate this with an angular app. I am trying to host my own instance of youtube-direct-lite
I have already configured the config.js as been told in this doc. Should I just copy paste all the js, css files to my project and use the index.html as a partial to display the recorder?
about configuring direct lite:
in config.js enter your developer-key and client-id.
then read the README file
download nodejs console
browse to the folder with the source in it
run this command : node r.js -o app.build.js
and it'll build the minified source for you, then copy and paste that source into your website and use the index.html & admin.html as the
and i'll work just fine.
about angular with direct lite:
I've seen so far only one implementation for it that is in youtube/dev/demos
http://www.youtube.com/yt/dev/demos.html#/upload
if you opened the sources, you'll find that it is uses angular, and it applies ytdirectlite, but I don't know how to use it and I still cannot find the opensource for it.

How to include ext-js calendar in jsp?

I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>

Resources